CSP: style-src

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.

Die HTTP Content-Security-Policy (CSP) style-src Direktive legt fest, welche Quellen für Stylesheets gültig sind.

CSP-Version 1
Direktiv-Typ Fetch-Direktive
default-src Fallback Ja. Wenn diese Direktive fehlt, sucht der Benutzeragent nach der default-src Direktive.

Syntax

http
Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;

Diese Direktive kann einen der folgenden Werte haben:

'none'

Keine Ressourcen dieses Typs dürfen geladen werden. Die einfachen Anführungszeichen sind obligatorisch.

<source-expression-list>

Eine durch Leerzeichen getrennte Liste von Quellausdruck-Werten. Ressourcen dieses Typs dürfen geladen werden, wenn sie mit einem der angegebenen Quellausdrücke übereinstimmen.

Quellausdrücke werden als Schlüsselwortwerte oder URL-Muster angegeben: Die Syntax für jeden Quellausdruck findet sich in CSP Source Values.

Beispiele

Verstoßfälle

Gegeben diesen CSP-Header:

http
Content-Security-Policy: style-src https://example.com/

werden die folgenden Stylesheets blockiert und nicht geladen:

html
<link href="https://not-example.com/styles/main.css" rel="stylesheet" />

<style>
  #inline-style {
    background: red;
  }
</style>

<style>
  @import url("https://not-example.com/styles/print.css") print;
</style>

ebenso wie Styles, die über den Link Header geladen werden:

http
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet

Inline-Style-Attribute werden ebenfalls blockiert:

html
<div style="display:none">Foo</div>

Sowie Styles, die in JavaScript durch direktes Setzen des style Attributs oder durch Setzen von cssText angewendet werden:

js
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";

Jedoch werden Stil-Eigenschaften, die direkt auf die style Eigenschaft des Elements gesetzt sind, nicht blockiert, was es den Benutzern ermöglicht, sicher Styles über JavaScript zu manipulieren:

js
document.querySelector("div").style.display = "none";

Diese Arten von Manipulationen können verhindert werden, indem JavaScript über die script-src CSP-Direktive verboten wird.

Unsichere eingebettete Stile

Hinweis: Das Verbot von eingebetteten Stilen und eingebetteten Skripten ist einer der größten Sicherheitsgewinne, die CSP bietet. Wenn Sie es jedoch unbedingt verwenden müssen, gibt es einige Mechanismen, die dies erlauben.

Um eingebettete Stile zu erlauben, können 'unsafe-inline', eine Nonce-Quelle oder eine Hash-Quelle, die mit dem eingebetteten Block übereinstimmt, spezifiziert werden. Die folgende Content-Security-Policy erlaubt eingebettete Stile wie das <style> Element und das style Attribut an jedem Element:

http
Content-Security-Policy: style-src 'unsafe-inline';

Das folgende <style> Element und das style Attribut werden durch die Richtlinie erlaubt:

html
<style>
  #inline-style {
    background: red;
  }
</style>

<div style="display:none">Foo</div>

Sie können eine Nonce-Quelle verwenden, um nur bestimmte eingebettete Stilblöcke zu erlauben. Sie müssen einen zufälligen Nonce-Wert generieren (unter Verwendung eines kryptografisch sicheren Zufallstoken-Generators) und ihn in die Richtlinie aufnehmen. Es ist wichtig zu beachten, dass dieser Nonce-Wert dynamisch generiert werden muss, da er für jede HTTP-Anfrage einzigartig sein muss:

http
Content-Security-Policy: style-src 'nonce-2726c7f26c'

Sie müssen den gleichen Nonce auf das <style> Element setzen:

html
<style nonce="2726c7f26c">
  #inline-style {
    background: red;
  }
</style>

Alternativ können Sie Hashes aus Ihren eingebetteten Stilen erstellen. CSP unterstützt sha256, sha384 und sha512. Die binäre Form des Hashes muss mit Base64 kodiert werden. Sie können den Hash eines Strings über das openssl Programm auf der Kommandozeile erhalten:

bash
echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64

Sie können eine Hash-Quelle verwenden, um nur bestimmte eingebettete Stilblöcke zu erlauben:

http
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='

Beim Erzeugen des Hashes schließen Sie nicht die <style> Tags ein und beachten Sie, dass Großschreibung und Leerzeichen wichtig sind, einschließlich führender oder nachfolgender Leerzeichen.

html
<style>
  #inline-style {
    background: red;
  }
</style>

Unsichere Stilausdrücke

Der 'unsafe-eval' Quellausdruck steuert mehrere Stilmethoden, die Stil-Deklarationen aus Strings erzeugen. Wenn 'unsafe-eval' nicht mit der style-src Direktive angegeben ist, werden die folgenden Methoden blockiert und haben keine Wirkung:

Spezifikationen

Specification
Content Security Policy Level 3
# directive-style-src

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch