Content-Security-Policy: default-src 'self'; img-src 'self' example.com

eval("console.log(`You've been hacked!`)");

Ein CSP kann Schutz gegen all diese bieten. Mit einem CSP können Sie:

• die erlaubten Quellen für JavaScript-Dateien und andere Ressourcen definieren und effektiv das Laden vonhttps://evil.example.com blockieren
• Inline-Skripttags deaktivieren
• nur Skripttags zulassen, die das korrektenonce oderhash gesetzt haben
• Inline-Ereignishandler deaktivieren
• #"fetch-richtlinien" >

  Fetch-Richtlinien

  Fetch-Richtlinien werden verwendet, um eine bestimmte Kategorie von Ressourcen anzugeben, die ein Dokument laden darf — wie JavaScript, CSS-Stile, Bilder, Schriftarten und so weiter.

  Es gibt verschiedene Fetch-Richtlinien für verschiedene Arten von Ressourcen. Zum Beispiel:

  • script-src setzt erlaubte Quellen für JavaScript.
  • style-src setzt erlaubte Quellen für CSS-Stile.
  • img-src setzt erlaubte Quellen für Bilder.

  Eine spezielle Fetch-Richtlinie istdefault-src, die eine Fallback-Richtlinie für alle Ressourcen setzt, deren Richtlinien nicht explizit aufgelistet sind.

  Für das komplette Set von Fetch-Richtlinien siehe dieReferenzdokumentation.

  Jede Fetch-Richtlinie wird entweder als einzelnes Schlüsselwort'none' oder ein oder mehrereQuellausdrücke angegeben, die durch Leerzeichen getrennt sind. Wenn mehr als ein Quellausdruck aufgeführt ist: Wenn eine der Methoden die Ressource erlaubt, dann ist die Ressource erlaubt.

  Zum Beispiel setzt das folgende CSP zwei Fetch-Richtlinien:

  • default-src wird der einzelne Quellausdruck'self' gegeben
  • img-src erhält zwei Quellausdrücke:'self' undexample.com

  

  Die Wirkung davon ist, dass:

  • Bilder entweder gleich-origin mit dem Dokument, oder vonexample.com geladen werden müssen
  • alle anderen Ressourcen gleich-origin mit dem Dokument sein müssen.

  In den nächsten Abschnitten beschreiben wir einige der Möglichkeiten, wie Sie Quellausdrücke verwenden können, um das Laden von Ressourcen zu kontrollieren. Beachten Sie, dass obwohl wir sie separat beschreiben, diese Ausdrücke im Allgemeinen kombiniert werden können: Zum Beispiel kann eine einzelne Fetch-Richtlinie Nonce sowie Hostnamen umfassen.

  Blockieren von Ressourcen

  Um einen Ressourcentyp vollständig zu blockieren, verwenden Sie das Schlüsselwort'none'. Zum Beispiel blockiert die folgende Anweisung alle<object> und<embed> Ressourcen:

  http

  Content-Security-Policy: object-src 'none'

  Beachten Sie, dass'none' nicht mit einer anderen Methode in einer bestimmten Richtlinie kombiniert werden kann: in der Praxis, wenn andere Quellausdrücke neben'none' angegeben werden, werden sie ignoriert.

  Nonces

  Einnonce ist der empfohlene Ansatz zur Einschränkung des Ladens von<script> und<style> Ressourcen.

  Mit einem Nonce erzeugt der Server einen zufälligen Wert für jede HTTP-Antwort und fügt sie in einescript-src- und/oder einestyle-src-Richtlinie ein:

  http

  Content-Security-Policy:  script-src 'nonce-416d1177-4d12-4e3b-b7c9-f6c409789fb8'

  Der Server fügt dann diesen Wert als Wert desnonce-Attributs für alle<script>- und/oder<style>-Tags hinzu, die sie im Dokument einfügen möchten.

  Der Browser vergleicht die beiden Werte und lädt die Ressource nur, wenn sie übereinstimmen. Die Idee ist, dass selbst wenn ein Angreifer etwas JavaScript in die Seite einfügen kann, er nicht wissen wird, welcher Nonce der Server verwenden wird, sodass der Browser sich weigert, das Skript auszuführen.

  Damit dieser Ansatz funktioniert, darf es einem Angreifer nicht möglich sein, den Nonce zu erraten.

  In der Praxis bedeutet dies, dass der Nonce für jede HTTP-Antwort unterschiedlich sein muss und nicht vorhersehbar sein darf.

  Das bedeutet wiederum, dass der Server kein statisches HTML bereitstellen kann, da er bei jeder Anfrage einen neuen Nonce einfügen muss. Typischerweise würde der Server eine Templating-Engine verwenden, um den Nonce einzufügen.

  Hier ein Beispielcode vonExpress, um dies zu veranschaulichen:

  js

  function content(nonce) {  return `    <script nonce="${nonce}" src="/main.js"></script>    <script nonce="${nonce}">console.log("hello!");</script>    <h1>Hello world</h1>     `;}app.get("/", (req, res) => {  const nonce = crypto.randomUUID();  res.setHeader("Content-Security-Policy", `script-src 'nonce-${nonce}'`);  res.send(content(nonce));});

  Bei jeder Anfrage erzeugt der Server einen neuen Nonce, fügt ihn in die CSP und in die<script>-Tags in dem zurückgesandten Dokument ein. Beachten Sie, dass der Server:

  • für jede Anfrage einen neuen Nonce erzeugt
  • Nonces mit sowohl externen als auch Inline-Skripten verwenden kann
  • den gleichen Nonce für alle<script>-Tags im Dokument verwendet

  Es ist wichtig, dass der Server irgendeine Art von Templating verwendet, um Nonces einzufügen, und sie nicht einfach in alle<script>-Tags einfügt: andernfalls könnte der Server versehentlich Nonces in Skripte einfügen, die von einem Angreifer eingeschleust wurden.

  Beachten Sie, dass Nonces nur für Elemente verwendet werden können, die einnonce-Attribut haben: das heißt, nur<script> und<style> Elemente.

  Hashes

  Fetch-Richtlinien können auch einen Hash des Skripts verwenden, um seine Integrität zu gewährleisten. Mit dieser Methode:

  1. Berechnet der Server einen Hash des Skriptinhalts mit einerHash-Funktion (einer von SHA-256, SHA-384 oder SHA-512)
  2. Erstellt eineBase64-Codierung des Ergebnisses
  3. Fügt ein Präfix hinzu, das den verwendeten Hash-Algorithmus identifiziert (eines vonsha256-,sha384- odersha512-).

  Es fügt dann das Ergebnis in die Richtlinie ein:

  http

  Content-Security-Policy: script-src 'sha256-cd9827ad...'

  Wenn der Browser das Dokument empfängt, hasht es das Skript, vergleicht das Ergebnis mit dem Wert aus dem Header und lädt das Skript nur, wenn sie übereinstimmen.

  Externe Skripte müssen auch dasintegrity-Attribut enthalten, damit diese Methode funktioniert.

  Hier ein Beispielcode von Express, um das zu veranschaulichen:

  js

  const hash1 = "sha256-ex2O7MWOzfczthhKm6azheryNVoERSFrPrdvxRtP8DI=";const hash2 = "sha256-H/eahVJiG1zBXPQyXX0V6oaxkfiBdmanvfG9eZWSuEc=";const csp = `script-src '${hash1}' '${hash2}'`;const content = `  <script src="./main.js" integrity="${hash2}"></script>  <script>console.log("hello!");</script>    <h1>Hello world</h1>     `;app.get("/", (req, res) => {  res.setHeader("Content-Security-Policy", csp);  res.send(content);});

  Beachten Sie, dass:

  • Wir haben einen separaten Hash für jedes Skript im Dokument.
  • Für das externe Skript "main.js" fügen wir auch dasintegrity Attribut hinzu und geben ihm den gleichen Wert.
  • Im Gegensatz zum Beispiel zur Verwendung von Nonces können sowohl das CSP als auch der Inhalt statisch sein, da die Hashes gleich bleiben. Dies macht hash-basierte Richtlinien geeigneter für statische Seiten oder Websites, die auf clientseitiges Rendering setzen.

  Schema-basierte Richtlinien

  Fetch-Richtlinien können ein Schema, wiehttps:, auflisten, um Ressourcen zu erlauben, die über dieses Schema bereitgestellt werden. Dies ermöglicht es beispielsweise, das Laden von Ressourcen auf HTTPS zu beschränken:

  http

  Content-Security-Policy: default-src https:

  Ortsbasierte Richtlinien

  Fetch-Richtlinien können Ressourcenladungen basierend darauf steuern, wo sich die Ressourcen befinden.

  Das Schlüsselwort'self' erlaubt Ressourcen, die mit dem Dokument selbst gleich-origin sind:

  http

  Content-Security-Policy: img-src 'self'

  Sie können auch einen oder mehrere Hostnamen angeben, möglicherweise einschließlich Platzhaltern, und nur von diesen Hosts bereitgestellte Ressourcen werden erlaubt. Dies könnte verwendet werden, um Inhalte von einem vertrauenswürdigen CDN bereitzustellen.

  http

  Content-Security-Policy: img-src *.example.org

  Sie können mehrere Standorte angeben. Die folgende Richtlinie erlaubt nur Bilder, die gleich-origin mit dem aktuellen Dokument sind oder von einem Subdomain von "example.org" oder von "example.com" bereitgestellt werden:

  http

  Content-Security-Policy: img-src 'self' *.example.org  example.com

  Inline-JavaScript

  Wenn ein CSP entweder einedefault-src- oder einescript-src-Richtlinie enthält, wird das Ausführen von Inline-JavaScript nicht erlaubt, es sei denn, es werden zusätzliche Maßnahmen ergriffen. Dazu gehört:

  • JavaScript, das in einem<script>-Element auf der Seite enthalten ist:

    html

    <script>  console.log("Hello from an inline script");</script>

  • JavaScript in einer Inline-Ereignishandlereigenschaft:

    html

    <img src="x" onerror="console.log('Hello from an inline event handler')" />

  • JavaScript in einer#"#">Click me</a>