The useHeadSafe composable is a wrapper around the useHead composable that restricts the input to only allow safe values.

Logic

There is a whitelist of allowed tags and attributes. If you try to use a tag or attribute that isn't on the whitelist, it will be ignored.

The whitelist is very restrictive, as there are many vectors for XSS attacks. If you need to use a tag or attribute that isn't on the whitelist, you can use the useHead composable instead, just make sure you sanitise the input.

The whitelist is as follows:

const WhitelistAttributes = {
  htmlAttrs: ['id', 'class', 'lang', 'dir'],
  bodyAttrs: ['id', 'class'],
  meta: ['id', 'name', 'property', 'charset', 'content'],
  noscript: ['id', 'textContent'],
  script: ['id', 'type', 'textContent'],
  link: ['id', 'color', 'crossorigin', 'fetchpriority', 'href', 'hreflang', 'imagesrcset', 'imagesizes', 'integrity', 'media', 'referrerpolicy', 'rel', 'sizes', 'type'],
}

• Style tags and attributes not supported <link rel="stylesheet" ...>, <style>, they are a vector for XSS attacks and clickjacking.
• Scripts of any sort are not allowed, except for JSON. <script type="application/json">, use textContent: myObject.
• http-equiv is not allowed on meta.
• data-* attributes are allowed.
• Link tags will strip invalid href's (data:, javascript:) and do not support rels: ['stylesheet', 'canonical', 'modulepreload', 'prerender', 'preload', 'prefetch'].

Example

Using head data from an untrusted data source.

const thirdPartyMeta = loadMeta()

useHeadSafe(thirdPartyMeta)