javascript / expert
Snippet
Runtime-Hydrierungs-Integritätsprüfung via DOM-Tree-Walker
In serverseitig gerenderten Anwendungen können vor der clientseitigen Hydrierung bösartige DOM-Modifikationen auftreten. Dieser Sicherheitsmechanismus nutzt einen privaten DOM-TreeWalker-Durchlauf zur Überprüfung von Element-Knoten, um nicht autorisierte Elemente zu entfernen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class HydrationSecurityGuard {#trustedNodes = new WeakSet();verifyHydrationBoundary(rootElement, allowedVNodes) {const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT);let node = walker.nextNode();while (node) {if (node.hasAttribute('data-raw-html') && !allowedVNodes.has(node)) {node.remove();throw new SecurityError('DOM injection detected during hydration');}this.#trustedNodes.add(node);node = walker.nextNode();}}}
vue
Erklärung
1
class HydrationSecurityGuard {
Deklariert eine objektorientierte Schutzklasse zur Überprüfung von DOM-Knoten vor der Hydrierung.
2
#trustedNodes = new WeakSet();
Kapselt verifizierte DOM-Elementreferenzen in einem privaten WeakSet, um Speicherlecks zu vermeiden.
3
verifyHydrationBoundary(rootElement, allowedVNodes) {
Definiert die Methode zur Überprüfung der Hydrierungsgrenze.
4
const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT);
Erstellt einen nativen DOM-TreeWalker, der ausschließlich Element-Knoten durchläuft.
5
let node = walker.nextNode();
Rückt den Walker-Zeiger auf das erste untergeordnete Element vor.
6
while (node) {
Iteriert sequentiell durch jeden untergeordneten DOM-Knoten im Teilbaum.
7
if (node.hasAttribute('data-raw-html') && !allowedVNodes.has(node)) {
Prüft, ob ein nicht verifiziertes Element gefährliche Attribute ohne Freigabe enthält.
8
node.remove();
Entfernt das verdächtige Element direkt aus dem Live-Dokumentenbaum.
9
throw new SecurityError('DOM injection detected during hydration');
Bricht die Hydrierung durch das Auslösen eines Sicherheitsfehlers ab.
10
this.#trustedNodes.add(node);
Registriert sichere Knoten im privaten WeakSet.
11
node = walker.nextNode();
Bewegt den Iterator-Zeiger in Tiefensuche-Reihenfolge zum nächsten Element-Knoten.