Vue Academy · Lección

Prevención de XSS en Vue

Escape automático de Vue, riesgos de v-html, DOMPurify para sanitización y trusted types

Prevención de XSS en Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es XSS

Cross-Site Scripting (XSS) es un ataque en el que se inyecta un script malicioso en una página y se ejecuta en el navegador de otro usuario. Puede robar cookies, tokens y datos. Vue le protege de forma predeterminada, pero algunos patrones pueden volver a abrir la puerta.

Vue escapa automáticamente las interpolaciones

El texto incluido en una interpolación de mustache {{ }} se escapa automáticamente como HTML. Una cadena de usuario que contenga etiquetas se muestra como texto inofensivo, no se ejecuta.

<!-- userInput = "<script>alert(1)</script>" -->
<p>{{ userInput }}</p>
<!-- renders the literal text, no script runs -->

La vinculación de atributos también es segura

La vinculación con v-bind / :attr también escapa los valores, por lo que las comillas inyectadas no pueden salir del atributo ni inyectar controladores.

<div :title="userInput">Hover me</div>

El peligro de v-html

v-html establece innerHTML directamente. No escapa el contenido, por lo que cualquier marcado, incluidos scripts y controladores de eventos, se muestra como HTML activo.

<!-- DANGEROUS with untrusted input -->
<div v-html="userInput"></div>

Cómo se explota v-html

Incluso sin una etiqueta de script, el HTML creado por un atacante puede ejecutar código mediante atributos de controladores de eventos o payloads como img onerror.

// attacker-supplied value
const userInput = "<img src=x onerror=stealCookies()>";

Regla: nunca use v-html con datos del usuario

La regla más sencilla es no pasar nunca contenido no confiable a v-html. Use interpolación normal, que escapa el contenido, siempre que la fuente esté controlada por el usuario.

Cuándo debe representar HTML

A veces realmente necesita HTML enriquecido, como el contenido de un CMS o la salida de Markdown. En ese caso, debe sanitizar el HTML antes de vincularlo.

Sanitizar con DOMPurify

DOMPurify elimina etiquetas y atributos peligrosos y conserva el formato seguro. Instálelo y sanitice el contenido antes de usar v-html.

npm install dompurify

Sanitizar y después vincular

Procese el valor con DOMPurify.sanitize en una propiedad calculada y, después, vincule el resultado limpio.

import DOMPurify from "dompurify";
import { computed } from "vue";

const safeHtml = computed(() =>
  DOMPurify.sanitize(props.rawHtml)
);
// template: <div v-html="safeHtml"></div>

Configurar las etiquetas permitidas

Puede restringir la lista de permitidos para que solo sobrevivan a la sanitización las etiquetas que espera.

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"],
  ALLOWED_ATTR: ["href"]
});

Otras fuentes que no debe confiar

Tampoco confíe en las URL: un href javascript: en un enlace vinculado puede ejecutar código. Valide o sanitice los href y nunca construya fuentes dinámicas de <script> a partir de datos del usuario.

// reject dangerous protocols
const safe = /^https?:/.test(url) ? url : "#";

Comprobación rápida

Debe representar HTML enviado por el usuario. ¿Cuál es el enfoque seguro?

Resumen

Vue escapa automáticamente las interpolaciones {{ }} y las vinculaciones de atributos, lo que neutraliza la mayoría de los ataques XSS. La excepción peligrosa es v-html, que representa HTML sin procesar. Nunca le pase directamente datos del usuario; cuando necesite HTML enriquecido, sanitícelo primero con DOMPurify y desconfíe también de las URL proporcionadas por el usuario.

Preguntas frecuentes

¿La lección «Prevención de XSS en Vue» es gratis?

Sí — el texto completo de «Prevención de XSS en Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Prevención de XSS en Vue»?

Escape automático de Vue, riesgos de v-html, DOMPurify para sanitización y trusted types Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Prevención de XSS en Vue»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Vue Academy