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

CSP Version 1
Direktivtyp Fetch-Direktive
default-src Fallback Ja. Wenn diese Direktive fehlt, wird der User-Agent nach der default-src Direktive suchen.

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 source expression Werten. 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 die CSSOM-Methoden, die CSS-Strings parsen und einfügen, wie die insertRule() Methoden und cssText Setter auf verschiedenen Schnittstellen, wie CSSStyleSheet.insertRule() und CSSStyleDeclaration.cssText, zu erlauben. Derzeit blockiert jedoch kein Browser diese Methoden, sodass es nicht erforderlich ist, unsafe-eval anzuwenden.

Beispiele

Verletzungsfälle

Angenommen, dieser CSP-Header:

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

die folgenden Stylesheets werden 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>

sowie Styles, die mit dem 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 angewendet werden, indem das style-Attribut direkt gesetzt wird, oder durch Setzen von cssText:

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

Styles-Eigenschaften, die direkt auf der style Eigenschaft des Elements gesetzt werden, werden jedoch nicht blockiert, sodass Benutzer sicher Styles über JavaScript manipulieren können:

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 Inline-Styles

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

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

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

Das folgende <style> Element und style Attribut werden von der 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 Inline-Style-Blöcke zu erlauben. Sie müssen einen zufälligen Nonce-Wert (unter Verwendung eines kryptografisch sicheren Zufallstoken-Generators) generieren und ihn in die Richtlinie aufnehmen. Es ist wichtig zu beachten, dass dieser Nonce-Wert dynamisch generiert werden muss, da er einzigartig für jede HTTP-Anfrage sein muss:

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

Sie müssen die gleiche Nonce auf dem <style> Element setzen:

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

Alternativ können Sie Hashes aus Ihren Inline-Styles 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 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-Style-Blöcke zu erlauben:

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

Wenn Sie den Hash generieren, schließen Sie die <style> Tags nicht ein und beachten Sie, dass Groß-/Kleinschreibung und Leerzeichen wichtig sind, einschließlich führender oder nachfolgender Leerzeichen.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch