javascript / expert
Snippet
SSR-kompatible Sicherheitsdirektiven
Dieses Expertenmuster erstellt eine benutzerdefinierte Direktive für sicheres HTML-Rendering, die sowohl das clientseitige Mounting als auch Server-Side Rendering (SSR) unterstützt. Durch die Implementierung von getSSRProps kann Vue den bereinigten Inhalt sicher auf dem Server rendern, was XSS verhindert und die Hydrierungskonsistenz wahrt.
snippet.js
1
2
3
4
5
6
7
8
9
10
app.directive('secure-html', {mounted(el, binding) {el.innerHTML = DOMPurify.sanitize(binding.value);},getSSRProps(binding) {return {innerHTML: DOMPurify.sanitize(binding.value)};}});
vue
Erklärung
1
getSSRProps(binding)
Spezieller Hook, der es der Direktive ermöglicht, Props während des serverseitigen Rendering-Prozesses beizusteuern.
2
DOMPurify.sanitize(binding.value)
Verwendet eine robuste Bibliothek, um bösartige Skripte aus dem Eingabestring zu entfernen, bevor er das DOM erreicht.