Prevención de XSS en {#html}
Comprenda los riesgos de {@html} y cómo desinfectar HTML que no sea de confianza.
Prevención de XSS en {#html} es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 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 Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Qué es XSS
Cross-Site Scripting inyecta scripts maliciosos en las páginas, a menudo mediante entradas de usuario que no son de confianza.
Seguridad predeterminada
Svelte escapa de forma predeterminada el texto interpolado. {user.name} es seguro.
Riesgo de {@html}
La etiqueta {@html ...} inyecta HTML sin procesar. Nunca le pase datos que no sean de confianza.
Limpie primero
Utilice bibliotecas como DOMPurify para limpiar el HTML antes de inyectarlo.
import DOMPurify from "isomorphic-dompurify";
const safe = DOMPurify.sanitize(userMarkdown);
<div>{@html safe}</div>Limpieza en el servidor
Limpie los datos en el servidor al almacenarlos, no solo al mostrarlos, para protegerse frente a errores futuros.
Listas de permitidos
Configure DOMPurify para permitir únicamente etiquetas y atributos específicos (por ejemplo, sin <script>).
Procesamiento de Markdown
Para el Markdown de los usuarios, conviértalo a HTML y límpielo antes de mostrarlo.
Fuentes confiables
El HTML procedente de su CMS o de contenido estático suele ser seguro; el contenido enviado por usuarios no lo es.
Encabezados CSP
Establezca una Content Security Policy para limitar los daños si se llegara a producir una vulnerabilidad XSS.
Scripts en línea
Prohíba los scripts en línea en la CSP para impedir que se ejecuten scripts inyectados.
Audite con frecuencia
Revise cada uso de {@html}; trátelo como una operación crítica para la seguridad.
Comprobación rápida
¿Cuál es el principal riesgo de {@html}?
Resumen
Evite utilizar {@html} con datos que no sean de confianza. Límpielos con DOMPurify y aplique una CSP estricta como defensa en profundidad.
Preguntas frecuentes
¿La lección «Prevención de XSS en {#html}» es gratis?
Sí — el texto completo de «Prevención de XSS en {#html}» 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 Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Prevención de XSS en {#html}»?
Comprenda los riesgos de {@html} y cómo desinfectar HTML que no sea de confianza. Practicas Sveltejs 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 Sveltejs Academy?
No se requiere experiencia previa. Sveltejs 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 2 de 4.
¿Cuánto tiempo toma la lección «Prevención de XSS en {#html}»?
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 Sveltejs Academy?
Sí. Cada lección de Sveltejs 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
- Protección CSRF en form actions
- Prevención de XSS en {#html}
- Variables de entorno: $env/static y $env/dynamic
- Limitación de solicitudes con hooks