flawopen.com/XSS em JavaScript/Vue v-html

Risco de XSS no Vue v-html

<p v-html="comment"></p>
// comment é interpretado como marcação real

<script setup>
import { computed } from 'vue'
import DOMPurify from 'dompurify'

const props = defineProps({ comment: String })
const safeComment = computed(() =>
  DOMPurify.sanitize(props.comment ?? '', {
    ALLOWED_TAGS: ['p', 'strong', 'em'],
    ALLOWED_ATTR: []
  })
)
</script>

<template>
  <div v-html="safeComment"></div>
</template>

Sanitize HTML rico antes de usar v-html

Prefira a interpolação {{ }} do Vue quando o conteúdo deve ser texto. Se um recurso realmente precisar de HTML rico escrito por usuários, sanitize-o com uma biblioteca mantida, como DOMPurify, usando uma allowlist restrita; vincule a v-html somente o resultado sanitizado. Mantenha o sanitizador atualizado e teste a política de marcação permitida. A sanitização reduz o risco, mas não torna qualquer HTML universalmente seguro; use um iframe isolado quando o conteúdo precisar continuar não confiável e ativo. Vue não compila o conteúdo de v-html como templates Vue.

Audite v-html e rastreie o fluxo dos dados

Pesquise todas as vinculações v-html. Para cada uma, identifique a origem, o sanitizador e sua configuração, e quem pode ver o conteúdo renderizado. Marque entrada direta do usuário, comentários armazenados, campos de CMS e respostas de API; confirme que texto comum usa interpolação.

Perguntas comuns

Referências

• Vue.js — Segurança: conteúdo HTML
• DOMPurify — documentação do sanitizador HTML
• OWASP — prevenção de Cross-Site Scripting
• flawopen.com — XSS em JavaScript