useHeadSafe

Source
Рекомендуемый способ задавать данные head при наличии пользовательского ввода.

Использование

useHeadSafe — обёртка над useHead, которая допускает только безопасные значения. Рекомендуется для управления head при работе с пользовательским вводом: опасные атрибуты отфильтровываются и снижается риск XSS.

При использовании useHeadSafe опасные атрибуты (например innerHTML в скриптах, http-equiv в meta) удаляются. Используйте этот композабл при выводе пользовательского контента в head.

Тип

Signature
export function useHeadSafe (input: MaybeComputedRef<HeadSafe>): void

Разрешённые атрибуты

Для каждого типа элемента head разрешены следующие атрибуты:

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

Подробные типы: @unhead/vue.

Параметры

input: объект MaybeComputedRef<HeadSafe> с данными для head. Можно передавать те же значения, что в useHead; отрендерятся только безопасные атрибуты.

Возвращаемые значения

Композабл ничего не возвращает.

Пример

app/pages/user-profile.vue
<script setup lang="ts">
// пользовательский контент, который может содержать вредоносный код
const userBio = ref('<script>alert("xss")<' + '/script>')

useHeadSafe({
  title: `User Profile`,
  meta: [
    {
      name: 'description',
      content: userBio.value, // безопасно санитизируется
    },
  ],
})
</script>
Подробнее в документации Unhead.