{@html} in Svelte allows you to render raw HTML inside a component. Unlike regular {} syntax, which automatically escapes HTML, {@html} inserts the content directly into the DOM without escaping.
When you use {@html someContent}, Svelte treats someContent as HTML and injects it into the DOM as-is. This can be useful for displaying pre-formatted HTML from trusted sources.
Using {@html} with untrusted user input can lead to Cross-Site Scripting (XSS) attacks, because malicious scripts can be injected and executed in the browser.
Avoid using
{@html}with untrusted user input.Sanitize any dynamic HTML content using libraries like DOMPurify before rendering.
Prefer Svelte's default
{}interpolation, which escapes HTML automatically.Use
{@html}only when rendering trusted, pre-sanitized HTML.