javascript / expert
Snippet
Bereinigung dynamischer HTML-Markups gegen DOM-Clobbering in benutzerdefinierten Direktiven
Das Einfügen von unbereinigtem dynamischen HTML über Svelte @html-Direktiven kann Anwendungen für Cross-Site Scripting (XSS) und DOM-Clobbering öffnen. Die Verwendung von DOMParser in einer Svelte-Action parst HTML außerhalb des DOMs und entfernt unsichere Tags sowie Inline-Event-Handler vor dem Einfügen.
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
Erklärung
1
export function sanitizeElementHtml(node, rawMarkup) {
Definiert eine Direktive, die HTML-Strings vor der Bindung bereinigt.
2
const parser = new DOMParser();
Instanziiert einen DOMParser zur isolierten Analyse roher HTML-Strings.
3
const parsedDoc = parser.parseFromString(rawMarkup, 'text/html');
Parst den Eingabestring in eine isolierte HTML-Dokumentstruktur.
4
parsedDoc.querySelectorAll('script, iframe, [on*]').forEach(el => el.remove());
Sucht und entfernt Skripte, IFrames und Inline-Event-Attribute.
5
node.innerHTML = parsedDoc.body.innerHTML;
Weist das bereinigte Markup dem Ziel-DOM-Element zu.