Content-Security-Policy: style-src Richtlinie
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 Rückfall |
Ja. Wenn diese Direktive fehlt, sucht der Benutzeragent nach der
default-src Direktive.
|
Syntax
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 Source Expressions übereinstimmen. Für diese Direktive sind die folgenden Source Expression Werte anwendbar:
<host-source><scheme-source>'self''unsafe-inline''unsafe-hashes''nonce-<nonce_value>''<hash_algorithm>-<hash_value>''report-sample'
Beachten Sie, dass die Spezifikation auch
'unsafe-eval'als gültigen Source Expression Wert einschließt, um die CSSOM-Methoden zu erlauben, die CSS-Strings parsen und einfügen, einschließlich derinsertRule()Methoden und dercssTextSetter auf verschiedenen Schnittstellen, wieCSSStyleSheet.insertRule()undCSSStyleDeclaration.cssText. Allerdings blockiert derzeit kein Browser diese Methoden, sodass es keinen Grund gibt,unsafe-evalanzuwenden.
Beispiele
Verstoßfälle
Angenommen, dieser CSP-Header:
Content-Security-Policy: style-src https://example.com/
blockiert die folgenden Stylesheets und wird nicht geladen:
<link href="https://not-example.com/styles/main.css" rel="stylesheet" />
<style>
#inline-style {
background: red;
}
</style>
<style>
@import "https://not-example.com/styles/print.css" print;
</style>
sowie die mit dem Link Header geladenen Styles:
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
Inline-Stilattributen werden ebenfalls blockiert:
<div style="display:none">Foo</div>
Ebenso wie Stile, die in JavaScript angewendet werden, indem das style Attribut direkt gesetzt wird, oder indem cssText gesetzt wird:
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";
Jedoch werden Stil-Eigenschaften, die direkt auf der style Eigenschaft des Elements gesetzt werden, nicht blockiert, was es Nutzern ermöglicht, sicher mit JavaScript Stile zu manipulieren:
document.querySelector("div").style.display = "none";
Diese Arten von Manipulationen können verhindert werden, indem JavaScript über die script-src CSP-Direktive nicht erlaubt wird.
Unsichere Inline-Stile
Hinweis: Das Verbieten von Inline-Stilen und Inline-Skripten ist einer der größten Sicherheitsvorteile, die CSP bietet. Wenn Sie jedoch unbedingt Inline-Stile verwenden müssen, gibt es einige Mechanismen, die dies erlauben.
Um Inline-Stile zu erlauben, kann 'unsafe-inline', eine Nonce-Quelle oder eine Hash-Quelle angegeben werden, die mit dem Inline-Block übereinstimmt. Die folgende Content Security Policy erlaubt Inline-Stile wie das <style> Element und das style Attribut an jedem Element:
Content-Security-Policy: style-src 'unsafe-inline';
Das folgende <style> Element und das style Attribut werden durch die Richtlinie erlaubt:
<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 (verwendend ein kryptographisch sicheres zufälliges Token-Generator) 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:
Content-Security-Policy: style-src 'nonce-2726c7f26c'
Sie müssen denselben Nonce auf dem <style> Element setzen:
<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 Hashes muss mit Base64 codiert werden. Sie können den Hash eines Strings über die Befehlszeile mit dem openssl Programm erhalten:
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:
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='
Beim Generieren des Hashs nicht die <style> Tags einbeziehen und beachten, dass Groß- und Kleinschreibung sowie Leerzeichen wichtig sind, einschließlich führender oder nachfolgender Leerzeichen.
<style>
#inline-style {
background: red;
}
</style>
Spezifikationen
| Specification |
|---|
| Content Security Policy Level 3 # directive-style-src |