javascript / expert
Snippet
Trusted-Types-Richtlinien-Kapselung für sichere Svelte-Kontext-Injektion
Dieses Muster nutzt W3C Trusted Types innerhalb eines Svelte-Kontextmoduls, um DOM-basierte XSS-Schwachstellen systematisch zu verhindern. Durch die Registrierung eines Symbol-basierten Kontext-Providers können Komponenten HTML-Bereinigungsfunktionen sicher anfordern, ohne globale Gültigkeitsbereiche zu belasten oder direkte innerHTML-Injektionen zu riskieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { setContext, getContext } from 'svelte';const SECURITY_KEY = Symbol('SAFE_HTML_POLICY');export function createSecureHTMLContext() {const policy = window.trustedTypes?.createPolicy('svelte-safe-html', {createHTML: (string) => string.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')});const sanitize = (rawHTML) => policy ? policy.createHTML(rawHTML) : rawHTML;setContext(SECURITY_KEY, { sanitize });}export function useSecureHTML() {const ctx = getContext(SECURITY_KEY);if (!ctx) throw new Error('Secure HTML context missing');return ctx.sanitize;}
svelte
Erklärung
1
const SECURITY_KEY = Symbol('SAFE_HTML_POLICY');
Erzeugt einen eindeutigen Symbol-Schlüssel zur überschneidungsfreien Referenzierung des Svelte-Kontexts.
2
const policy = window.trustedTypes?.createPolicy('svelte-safe-html', {
Definiert eine Browser Trusted-Types-Richtlinie, sofern vom User-Agent unterstützt.
3
createHTML: (string) => string.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
Bereinigt eingehende Zeichenketten durch Entfernen ausführbarer Script-Tags vor der DOM-Einfügung.
4
setContext(SECURITY_KEY, { sanitize });
Bindet die Bereinigungsfunktion an den Svelte-Komponenten-Kontext.
5
const ctx = getContext(SECURITY_KEY);
Fragt die gekapselte Sicherheitsrichtlinie aus dem übergeordneten Komponentenkontext ab.