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
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:
Content-Security-Policy: style-src https://example.com/
werden die folgenden Stylesheets blockiert und nicht geladen:
<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:
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
Inline-Style-Attribute werden ebenfalls blockiert:
<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:
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:
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:
Content-Security-Policy: style-src 'unsafe-inline';
Das folgende <style>
-Element und das style
-Attribut werden von der 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-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:
Content-Security-Policy: style-src 'nonce-2726c7f26c'
Den gleichen Nonce müssen Sie auf das <style>
-Element setzen:
<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:
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:
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.
<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
BCD tables only load in the browser