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

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 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 Quellausdrücke anwendbar:

Beispiele

Verletzungsfälle

Angenommen, es gibt 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 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>

Ebenso wie 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;";

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

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

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

Unsichere Inline-Stile

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

Um Inline-Stile zu erlauben, können 'unsafe-inline', eine Nonce-Quelle oder eine Hash-Quelle, die zum Inline-Block passt, angegeben werden. Die folgende Content Security Policy erlaubt Inline-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 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 zuzulassen. Sie müssen einen zufälligen Nonce-Wert generieren (unter Verwendung eines kryptografisch sicheren Zufallstoken-Generators) und ihn in der Richtlinie aufnehmen. Es ist wichtig zu beachten, dass dieser Nonce-Wert dynamisch generiert werden muss, da er für jede HTTP-Anfrage eindeutig sein muss:

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

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

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

Alternativ können Sie Hashes Ihrer Inline-Stile 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 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='

Beim Generieren des Hashs sollten Sie die <style>-Tags nicht einschließen und beachten, dass Groß-/Kleinschreibung und Leerzeichen einschließlich führender oder nachfolgender Leerzeichen von Bedeutung sind.

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

Unsichere Stillausdrücke

Der 'unsafe-eval' Quellausdruck kontrolliert mehrere Stilmethoden, die Stildeklarationen aus Strings erstellen. 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
style-src

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch