Security (1/6)
How does Svelte prevent XSS attacks by default?
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.
Default protections provided by Svelte:
- 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.
Escaping in Action
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.
Example of {@html}
Tips to stay safe:
- 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.