Content-Security-Policy: style-src Direktive

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

CSP-Version 1
Direktivtyp 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 zwingend erforderlich.

<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 zu erlauben, die CSS-Strings parsen und einfügen, einschließlich der insertRule() Methoden und cssText Setter auf verschiedenen Schnittstellen, wie CSSStyleSheet.insertRule() und CSSStyleDeclaration.cssText. Allerdings blockiert derzeit kein Browser diese Methoden, also gibt es keinen Bedarf, unsafe-eval anzuwenden.

Beispiele

Verletzungsfälle

Angesichts dieses CSP-Headers:

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>

sowie 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>

Ebenso wie Styles, die in JavaScript durch das direkte Setzen des style Attributs oder durch das Setzen von cssText angewendet werden:

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

Stil-Eigenschaften, die direkt auf der style Eigenschaft eines Elements gesetzt werden, werden jedoch nicht blockiert, wodurch Benutzer Stile sicher ü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 untersagt wird.

Unsichere Inline-Stile

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

Um Inline-Stile zu erlauben, kann 'unsafe-inline', eine Nonce-Quelle oder eine Hash-Quelle, die mit dem Inline-Block übereinstimmt, angegeben 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 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 zuzulassen. Sie müssen einen zufälligen Nonce-Wert (unter Verwendung eines kryptographisch sicheren Zufallstoken-Generators) generieren und 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 denselben Nonce auf dem <style> Element einstellen:

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

Alternativ können Sie Hashes von Ihren Inline-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 einer Zeichenkette über die Befehlszeile mit dem 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 zuzulassen:

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ß- und Kleinschreibung sowie 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

Siehe auch