javascript / expert
Snippet
Sanitizing Dynamic HTML Markup Against DOM Clobbering in Custom Directives
Injecting un-sanitized dynamic markup via Svelte @html directive can expose applications to Cross-Site Scripting (XSS) and DOM Clobbering. Using DOMParser inside a Svelte action parses raw HTML off-document and strip unsafe tags and inline event handlers before DOM insertion.
snippet.js
javascript
1
2
3
4
5
6
export function sanitizeElementHtml(node, rawMarkup) {const parser = new DOMParser();const parsedDoc = parser.parseFromString(rawMarkup, 'text/html');parsedDoc.querySelectorAll('script, iframe, [on*]').forEach(el => el.remove());node.innerHTML = parsedDoc.body.innerHTML;}
svelte
Breakdown
1
export function sanitizeElementHtml(node, rawMarkup) {
Defines a node directive that sanitizes HTML string inputs before binding.
2
const parser = new DOMParser();
Instantiates a browser DOMParser to parse raw HTML strings in an isolated context.
3
const parsedDoc = parser.parseFromString(rawMarkup, 'text/html');
Parses input string into a detached HTML document structure.
4
parsedDoc.querySelectorAll('script, iframe, [on*]').forEach(el => el.remove());
Queries and removes executable script elements, IFrames, and inline attribute event handlers.
5
node.innerHTML = parsedDoc.body.innerHTML;
Assigns the sanitized markup string to the targeted DOM element.