SSR-kompatible Sicherheitsdirektiven

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
javascript
app.directive('secure-html', {
  mounted(el, binding) {
    el.innerHTML = DOMPurify.sanitize(binding.value);
  },
  getSSRProps(binding) {
    return {
      innerHTML: DOMPurify.sanitize(binding.value)
    };
  }
});

vue

Erklärung

getSSRProps(binding)

Spezieller Hook, der es der Direktive ermöglicht, Props während des serverseitigen Rendering-Prozesses beizusteuern.

DOMPurify.sanitize(binding.value)

Verwendet eine robuste Bibliothek, um bösartige Skripte aus dem Eingabestring zu entfernen, bevor er das DOM erreicht.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek