useHeadSafe

Исходный код
Рекомендуемый способ задавать содержимое `<head>` при данных от пользователя.

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

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

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

Тип

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

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

Белый список атрибутов по типам элементов:

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, но в DOM попадут только безопасные атрибуты.

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

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

Пример

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

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