Svelte helps protect your application from Cross-Site Scripting (XSS) attacks by escaping all dynamic data before inserting it into the DOM. This prevents malicious scripts from running when untrusted user input is rendered.
Dynamic values inside
{}are automatically HTML-escaped.Characters like
<,>, and"are converted to safe HTML entities.Only explicit use of
{@html ...}disables escaping, giving the developer full control.
In the above example, the malicious <img> tag will be rendered as plain text, not executed, because Svelte escapes it automatically.
If you need to render raw HTML, Svelte provides the {@html} tag. However, this bypasses escaping and can introduce XSS vulnerabilities if the content is not sanitized first.
Avoid using
{@html}whenever possible.If raw HTML is required, sanitize the content using a library like DOMPurify before rendering.
Never trust user input or external data sources.
Rely on Svelte's default escaping for most use cases.