10 Best Practices für React-Sicherheit

Sie suchen nach den besten Möglichkeiten, Ihre React-App zu schützen? Dann sind Sie hier genau richtig! Diese Checkliste mit Best Practices für React-Sicherheit hilft Ihnen und Ihrem Team, Sicherheitsprobleme in Ihren React-Anwendungen zu finden und zu beheben. Außerdem zeigen wir Ihnen, wie Sie Ihren React-Code automatisch auf sicherheitsrelevante Probleme testen und diese automatisch beheben können.

Legen wir los!

Cheat Sheet herunterladen.

10 Best Practices für React-Sicherheit

1. Verwenden Sie den standardmäßigen XSS-Schutz mit Datenbindung

2. Achten Sie auf gefährliche URLs und URL-basierte Skript-Injection

3. HTML bereinigen und rendern

4. Direkten DOM-Zugriff vermeiden

5. React-Server-Side-Rendering absichern

6. Auf bekannte Schwachstellen in Abhängigkeiten prüfen

7. JSON-Injection-Angriffe vermeiden

8. Keine verwundbaren React-Versionen verwenden

9. Linter-Konfigurationen verwenden

10. Gefährlichen Bibliotheks-Code vermeiden

1. Verwenden Sie den standardmäßigen React-XSS-Schutz mit Datenbindung

Ist React anfällig für Cross-Site-Scripting (XSS)?

React ist standardmäßig so konzipiert, dass es nicht anfällig ist. Entwickler können jedoch Optionen aktivieren, durch die es für Cross-Site-Scripting anfällig werden kann.

Wie kann ich React-XSS-Angriffe verhindern?

Verwenden Sie die standardmäßige Datenbindung mit geschweiften Klammern ({}), und React maskiert Werte automatisch, um vor XSS-Angriffen zu schützen. Beachten Sie, dass dieser Schutz nur beim Rendern von textContent greift, nicht aber beim Rendern von HTML-Attributen.

Verwenden Sie die JSX-Syntax für Datenbindung ({}), um Daten in Ihre Elemente einzufügen.

So geht’s:

<div>{data}</div>

Vermeiden Sie dynamische Attributwerte ohne benutzerdefinierte Validierung.

So nicht:

<form action={data}>...

2. Achten Sie auf gefährliche URLs und URL-basierte Skript-Injection

URLs können über URLs mit dem Protokoll javascript: dynamische Skriptinhalte enthalten. Validieren Sie Ihre Links, um sicherzustellen, dass sie http: oder https: verwenden und eine URL-basierte Skript-Injection über javascript: zu verhindern. Validieren Sie URLs mithilfe einer nativen URL-Parsing-Funktion und gleichen Sie anschließend die geparste Protokolleigenschaft mit einer Zulassungsliste ab.

So geht’s:

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

So nicht:

<a href={attackerControlled}>Click here!</a>

3. HTML bereinigen und rendern

Mit dangerouslySetInnerHTML können Sie HTML direkt in gerenderte DOM-Knoten einfügen. Alle auf diese Weise eingefügten Inhalte müssen vorher bereinigt werden. Verwenden Sie eine Bereinigungsbibliothek wie dompurify für alle Werte, bevor Sie sie der Eigenschaft dangerouslySetInnerHTML zuweisen.

Verwenden Sie dompurify, wenn Sie HTML in das DOM einfügen.

So geht’s:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4. Direkten DOM-Zugriff vermeiden

Greifen Sie niemals auf das DOM zu, um Inhalte direkt in DOM-Knoten einzufügen. Wenn es sich nicht vermeiden lässt, verwenden Sie dangerouslySetInnerHTML, um HTML einzufügen, und bereinigen Sie es zuvor mit dompurify.

Was ist React dangerouslySetInnerHTML?

dangerouslySetInnerHTML ist eine Eigenschaft, mit der Entwickler HTML-Inhalte direkt in ein HTML-Element einer React-App einfügen können.

So geht’s:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

Verwenden Sie keine Refs und findDomNode(), um auf gerenderte DOM-Elemente zuzugreifen und Inhalte direkt über innerHTML oder ähnliche Eigenschaften und Methoden einzufügen.

So nicht:

this.myRef.current.innerHTML = attackerControlledValue;

5. React-Server-Side-Rendering absichern

Bei Funktionen für serverseitiges Rendering wie ReactDOMServer.renderToString() und ReactDOMServer.renderToStaticMarkup() sorgt die Datenbindung für eine automatische Maskierung der Inhalte.

Verketten Sie keine Zeichenfolgen mit der Ausgabe von renderToStaticMarkup(), bevor Sie die Zeichenfolgen zur Hydrierung an den Client senden.

Verketten Sie zur Vermeidung von XSS keine nicht bereinigten Daten mit der Ausgabe von renderToStaticMarkup().

So geht’s:

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6. Auf bekannte Schwachstellen in Abhängigkeiten prüfen

Einige Versionen von Komponenten von Drittanbietern können JavaScript-Sicherheitsprobleme enthalten. Prüfen Sie Ihre Abhängigkeiten immer mit einem Tool für Software Composition Analysis (SCA), bevor Sie sie einem Projekt hinzufügen, und aktualisieren Sie sie, sobald eine neuere Version verfügbar ist.

Snyk-Erweiterung für VS Code

Wenn Sie eine React-Anwendung in VS Code entwickeln, können Sie die Snyk-Erweiterung verwenden, um sich über bekannte Schwachstellen in Ihrem Projekt benachrichtigen zu lassen. Diese Warnungen werden durch wellenförmige Unterstreichungen direkt in Ihrer package.json-Datei, im Bereich der Snyk-Erweiterung und im VS-Code-Problembereich angezeigt. So müssen Sie Ihre Entwicklungsumgebung nicht verlassen, um mehr über diese Schwachstellen zu erfahren – alles ist direkt in Ihrem Arbeitsbereich verfügbar.

Snyk-App (https://app.snyk.io)

Mit nur drei Klicks können Sie einen PR zur Behebung einer Schwachstelle in React erstellen. Suchen Sie zunächst in der Snyk-Web-App nach der Schwachstelle, die Sie in Ihrer App beheben möchten. Klicken Sie dann auf Diese Schwachstelle beheben (oder bei mehreren auf Diese Schwachstellen beheben). Erfahren Sie hier mehr über das Snyk-Produkt.

Anschließend werden Sie aufgefordert, zu bestätigen, dass Sie mit Snyk einen Pull Request (PR) zur Behebung der Schwachstelle erstellen möchten.

Nach der Bestätigung gelangen Sie zum von Snyk erstellten PR. Dort können Sie überprüfen und testen, ob Ihre App mit den vorgeschlagenen Änderungen weiterhin wie erwartet funktioniert, bevor Sie sie zusammenführen.

Snyk CLI

Sie können auch die kostenlose Snyk CLI verwenden, um nach Schwachstellen zu suchen. Beheben Sie Schwachstellen automatisch mit Snyk, indem Sie Ihr Quellcode-Managementsystem integrieren, um automatisierte Korrekturen zu erhalten:

$ npx snyk test

7. JSON-Injection-Angriffe vermeiden

Bei serverseitig gerenderten React-Seiten werden häufig JSON-Daten mitgesendet. Maskieren Sie <-Zeichen immer durch einen harmlosen Ersatzwert, um Injection-Angriffe zu verhindern.

Ersetzen Sie HTML-relevante Zeichen in JSON immer durch harmlose Äquivalente.

So geht’s:

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8. Keine verwundbaren React-Versionen verwenden

In der React-Bibliothek gab es in der Vergangenheit einige Schwachstellen mit hohem Schweregrad. Daher empfiehlt es sich, stets die neueste Version zu verwenden.

Vermeiden Sie verwundbare Versionen von react und react-dom, indem Sie mit npm outdated prüfen, ob Sie die neuesten Versionen verwenden.

9. Linter-Konfigurationen verwenden

Installieren Sie Linter-Konfigurationen und Plugins, die Sicherheitsprobleme in Ihrem Code automatisch erkennen und Hinweise zu deren Behebung geben.

Verwenden Sie die ESLint-Konfiguration für React-Sicherheit, um Sicherheitsprobleme in unserer Codebasis zu erkennen.

Richten Sie mit einer Bibliothek wie husky einen Pre-Commit-Hook ein, der fehlschlägt, wenn Linter-Probleme mit Sicherheitsbezug erkannt werden.

Verwenden Sie Snyk, um automatisch auf neue Versionen zu aktualisieren, wenn die von Ihnen verwendeten Versionen Schwachstellen enthalten.

10. Gefährlichen Bibliotheks-Code vermeiden

Bibliotheks-Code wird häufig für gefährliche Vorgänge verwendet, etwa zum direkten Einfügen von HTML in das DOM. Prüfen Sie Bibliotheks-Code manuell oder mit Lintern, um unsichere Verwendungen der React-Sicherheitsmechanismen zu erkennen.

Vermeiden Sie Bibliotheken, die dangerouslySetInnerHTML, innerHTML, nicht validierte URLs oder andere unsichere Muster verwenden. Prüfen Sie Ihren node_modules-Ordner mit Sicherheits-Lintern, um unsichere Muster in Ihrem Bibliotheks-Code zu erkennen.

React-Sicherheits-Cheat-Sheet herunterladen

Laden Sie dieses praktische PDF herunter und verwenden Sie es als Checkliste, um die Sicherheit Ihrer React-Anwendung zu überprüfen.