XSS Prevention in {#html}
Understand the risks of {@html} and how to sanitize untrusted HTML.
XSS Prevention in {#html} is a free Sveltejs Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
What XSS Is
Cross-Site Scripting injects malicious scripts into pages, often via untrusted user input.
Default Safety
Svelte escapes interpolated text by default. {user.name} is safe.
{@html} Risk
The {@html ...} tag injects raw HTML. Never pass untrusted data through it.
Sanitize First
Use libraries like DOMPurify to clean HTML before injecting.
import DOMPurify from "isomorphic-dompurify";
const safe = DOMPurify.sanitize(userMarkdown);
<div>{@html safe}</div>Server-Side Sanitization
Sanitize on the server when storing, not just when rendering, to defend against future bugs.
Allow Lists
Configure DOMPurify to allow only specific tags and attributes (e.g. no <script>).
Markdown Pipelines
For user markdown, render to HTML then sanitize before output.
Trusted Sources
HTML from your CMS or static content is generally safe; user-submitted content is not.
CSP Headers
Set a Content Security Policy to limit damage if XSS slips through.
Inline Scripts
Disallow inline scripts in CSP to prevent injected scripts from running.
Audit Often
Review every {@html} usage; treat it as a security-critical operation.
Quick Check
What is the main risk of {@html}?
Recap
Avoid {@html} with untrusted data. Sanitize with DOMPurify and enforce strict CSP for defense in depth.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “XSS Prevention in {#html}” lesson free?
Yes — the full text of “XSS Prevention in {#html}” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO. The Sveltejs Academy course includes 4 lessons in total.
What will I learn in “XSS Prevention in {#html}”?
Understand the risks of {@html} and how to sanitize untrusted HTML. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
How long does the “XSS Prevention in {#html}” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- CSRF Protection in Form Actions
- XSS Prevention in {#html}
- Environment Variables: $env/static and $env/dynamic
- Rate Limiting with Hooks