dangerouslySetInnerHTML e v-html

Estes são atributos específicos dos frameworks React (dangerouslySetInnerHTML) e Vue (v-html) criados para permitir a renderização de HTML puro. O nome do atributo no React é propositalmente longo e assustador para alertar o desenvolvedor sobre os riscos de segurança.

O Risco

Usar esses atributos sem sanitização é a causa número 1 de vulnerabilidades de XSS em aplicações modernas.

---

Como fazer vs Como não fazer

✅ Como fazer (Exemplo em React)

import DOMPurify from 'dompurify';

function UserComment({ htmlContent }) {
  // ✅ SEMPRE sanitize antes de injetar
  const cleanHtml = DOMPurify.sanitize(htmlContent);
  
  return (
    <div 
      className="comment-body"
      dangerouslySetInnerHTML={{ __html: cleanHtml }} 
    />
  );
}

✅ Como fazer (Exemplo em Vue)

<template>
  <!-- ✅ SEMPRE sanitize antes de injetar -->
  <div v-html="sanitizedHtml"></div>
</template>

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

const props = defineProps(['htmlContent']);
const sanitizedHtml = computed(() => DOMPurify.sanitize(props.htmlContent));
</script>

❌ Como não fazer

• Não use esses atributos apenas para converter entidades HTML (ex: converter   em espaço); existem formas mais seguras de lidar com texto.
• Não use dangerouslySetInnerHTML com dados que você não controla totalmente (entradas de usuários, parâmetros de URL, dados de APIs de terceiros).
• Não esqueça de tratar casos onde o DOMPurify pode retornar uma string vazia após a sanitização, para garantir que o layout da tela não quebre.