javascript / expert
Snippet
Bereinigung von Serverseitigem HTML-Rendering mittels DOMPurify und JSDOM im Next.js App Router
Die Ausführung von headless JSDOM DOMPurify-Instanzen in Next.js Server Components ermöglicht die serverseitige HTML-Bereinigung vor dem Rendern unsicherer Inhalte mit dangerouslySetInnerHTML.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { JSDOM } from 'jsdom';import DOMPurify from 'dompurify';const window = new JSDOM('').window;const purify = DOMPurify(window);export function sanitizeHtmlPayload(dirtyHtml) {if (typeof dirtyHtml !== 'string') {throw new TypeError('Payload must be a string');}return purify.sanitize(dirtyHtml, {ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],ALLOWED_ATTR: ['href']});}
nextjs
Erklärung
1
const window = new JSDOM('').window;
Instanziiert ein minimales virtuelles DOM-Fenster im Arbeitsspeicher des Node.js-Servers.
2
const purify = DOMPurify(window);
Bindet DOMPurify-Bereinigungsfunktionen an die isolierte virtuelle DOM-Instanz.
3
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
Definiert eine explizite Positivliste sicherer HTML-Elemente und entfernt Skript- oder Iframe-Tags.