¿Qué revisión harías antes de aceptar `v-html`, contenido enriquecido o integraciones que inyectan HTML?

Respuesta

• Primero pregunta si realmente necesitas renderizar HTML y no una representación segura más limitada.
• Si lo necesitas, sanitiza antes de mostrar, define whitelist de tags y atributos y centraliza esa responsabilidad en un componente claro.
• Revisa también enlaces, imágenes o embeds, porque un HTML aparentemente inocente puede seguir abriendo una superficie de ataque real.

Puntos clave

• Vue escapa interpolaciones y atributos por defecto, pero no convierte en seguro cualquier HTML, URL o contenido que venga de fuera.
• La seguridad real en autenticación depende mucho más del diseño de sesión, cookies y backend que de esconder tokens en el frontend.
• La regla práctica es no tratar nunca datos o plantillas del usuario como si fueran confiables por el mero hecho de renderizarlos en Vue.

Errores comunes

• Confiar en localStorage o checks de cliente como defensa principal crea sensación de seguridad, no seguridad real.
• Aceptar HTML enriquecido sin sanitización explícita abre una superficie de ataque innecesaria.

Ejemplo de código

const rawHtml = ref("");
const safeHtml = computed(() => DOMPurify.sanitize(rawHtml.value, {
  ALLOWED_TAGS: ["p", "strong", "em", "a", "ul", "li"],
  ALLOWED_ATTR: ["href", "target", "rel"],
}));

Ejemplo o caso real

Aparece sobre todo cuando el producto acepta contenido enriquecido, mantiene sesión durante tiempo o combina SSR con llamadas autenticadas desde el cliente.

Idea clave

Vue ayuda, pero la seguridad sigue siendo una decisión de sistema, no una propiedad automática del frontend.