Content-Security-Policy: style-src directive

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 spezifiziert gültige Quellen für Stylesheets.

CSP-Version 1
Direktivtyp Fetch-Direktive
default-src Rückgriff Ja. Wenn diese Direktive fehlt, sucht der User Agent 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 Quellausdrücken. Ressourcen dieses Typs dürfen geladen werden, wenn sie mit einem der angegebenen Quellausdrücke übereinstimmen. Für diese Direktive sind die folgenden Quellausdruckswerte anwendbar:

Beachten Sie, dass die Spezifikation auch 'unsafe-eval' als gültigen Quellausdruckswert einschließt, um CSSOM-Methoden zuzulassen, die CSS-Strings parsen und einfügen, einschließlich der insertRule()-Methoden und der cssText-Setter auf verschiedenen Schnittstellen, wie CSSStyleSheet.insertRule() und CSSStyleDeclaration.cssText. Derzeit blockiert jedoch kein Browser diese Methoden, sodass es nicht notwendig ist, unsafe-eval anzuwenden.

Beispiele

Verletzungsfälle

Angenommen, dieser CSP-Header ist gesetzt:

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 Stile, die über den Link-Header geladen werden:

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

Inline-Stilattribute werden ebenfalls blockiert:

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

Ebenso wie Stile, die in JavaScript durch Setzen des style-Attributs direkt oder durch Setzen von cssText angewendet werden:

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

Jedoch werden Stileigenschaften, die direkt auf der style-Eigenschaft des Elements gesetzt werden, nicht blockiert, was es Benutzern ermöglicht, Stile sicher über JavaScript zu manipulieren:

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

Diese Art von Manipulationen kann verhindert werden, indem JavaScript über die script-src CSP-Direktive nicht zugelassen wird.

Unsichere Inline-Stile

Hinweis: Das Verbot von Inline-Stilen und Inline-Skripten ist einer der größten Sicherheitsvorteile, die CSP bietet. Wenn Sie es jedoch unbedingt verwenden müssen, gibt es einige Mechanismen, die sie zulassen.

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

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

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

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

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

Sie können eine Nonce-Quelle verwenden, um nur bestimmte Inline-Stilblöcke zuzulassen. Sie müssen einen zufälligen Nonce-Wert generieren (mithilfe eines kryptografisch sicheren zufälligen Token-Generators) und ihn in die Richtlinie einschließen. 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 denselben Nonce auf dem <style>-Element setzen:

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

Alternativ können Sie Hashes aus Ihren Inline-Stilen erstellen. CSP unterstützt sha256, sha384 und sha512. Die binäre Form des Hashs muss mit Base64 kodiert werden. Sie können den Hash einer Zeichenkette in der Befehlszeile über das openssl-Programm 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 Inline-Stilblöcke zuzulassen:

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

Beim Erzeugen des Hashs sollten Sie die <style>-Tags nicht einschließen und beachten, dass Groß-/Kleinschreibung und Leerzeichen, einschließlich führender oder nachfolgender Leerzeichen, eine Rolle spielen.

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch