Snippet

Bereinigung von Rich-HTML-Inhalten vor dem Einfügen mit dangerouslySetInnerHTML

Die unbereinigte Übergabe von benutzergeneriertem Markup an `dangerouslySetInnerHTML` setzt React-Anwendungen Cross-Site-Scripting-Angriffen (XSS) aus. Durch das Bereinigen des Strings mit DOMPurify innerhalb eines `useMemo`-Hooks werden schädliche ausführbare Tags (`<script>`, `<iframe>`) und gefährliche Event-Handler-Attribute (`onload`, `onerror`) entfernt, bevor das sichere HTML in das DOM eingefügt wird.

snippet.js

javascript

import DOMPurify from 'dompurify';
 
function ArticleViewer({ rawHtmlContent }) {
  const cleanHtml = React.useMemo(() => {
    if (typeof rawHtmlContent !== 'string') return '';
    return DOMPurify.sanitize(rawHtmlContent, {
      USE_PROFILES: { html: true },
      FORBID_TAGS: ['script', 'iframe', 'object'],
    });
  }, [rawHtmlContent]);
 
  return (
    <article
      className="article-body"
      dangerouslySetInnerHTML={{ __html: cleanHtml }}
    />
  );
}

react

Erklärung

return DOMPurify.sanitize(rawHtmlContent, {

Analysiert und bereinigt den rohen HTML-String anhand strenger Sicherheitsregeln von schädlichen Elementen.

FORBID_TAGS: ['script', 'iframe', 'object'],

Verbietet explizit gefährliche Tags, die unerlaubte Skripte ausführen oder fremde Kontexte einbinden könnten.

dangerouslySetInnerHTML={{ __html: cleanHtml }}

Fügt das validierte, bereinigte HTML-Markup direkt als Kind-Elemente des Article-Knotens ein.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Bereinigung von Rich-HTML-Inhalten vor dem Einfügen mit dangerouslySetInnerHTML

Verwandt