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.
HTTP の Content-Security-Policy
(CSP) における style-src
ディレクティブは、スタイルシートの有効なソースを指定します。
CSP バージョン | 1 |
---|---|
ディレクティブ種別 | フェッチディレクティブ |
default-src による代替 |
あり。このディレクティブがない場合、ユーザーエージェントは default-src ディレクティブを探します。 |
構文
style-src
ポリシーには、 1 つまたは複数のソースが許可されています。
Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src <source> <source>;
ソース
<source>
は、 CSP ソース値にあるいずれかの値を取ることができます。
なお、この同じ値のセットはすべてのフェッチディレクティブ(と 他の多くのディレクティブ)で使用できます。
例
違反する場合
この CSP ヘッダーがある場合、
Content-Security-Policy: style-src https://example.com/
以下のスタイルシートはブロックされ、読み込まれません。
<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>
Link
ヘッダーで読み込まれるものも同様です。
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
インラインの style 属性もブロックされます。
<div style="display:none">Foo</div>
JavaScript で直接 style
属性を設定したり、 cssText
を設定したりしたスタイルも同様です。
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";
しかし、要素の style
プロパティに直接設定されたスタイルプロパティはブロックされず、 JavaScript から安全にスタイルを操作することができます。
document.querySelector("div").style.display = "none";
この手の操作は、 CSP の script-src
ディレクティブで JavaScript を無効にすることで防ぐことができます。
安全ではないインラインスタイル
メモ: インラインスタイルとインラインスクリプトを禁止することは、 CSP が提供する最大のセキュリティ上の利点の一つです。しかし、どうしても使用しなければならない場合は、それらを許可する仕組みがいくつかあります。
インラインスタイルを許可するために、 'unsafe-inline'
を指定するか、インラインブロックに一致するノンスソースまたはハッシュソースを指定することができます。
Content-Security-Policy: style-src 'unsafe-inline';
上記のコンテンツセキュリティポリシーは <style>
要素やあらゆる要素の style
属性などのインラインスタイルを許可します。
<style>
#inline-style {
background: red;
}
</style>
<div style="display:none">Foo</div>
ノンスソースを使用して、特定のインラインスタイルのみ許可することができます。
Content-Security-Policy: style-src 'nonce-2726c7f26c'
同じノンスを <style>
要素にも設定する必要があります。
<style nonce="2726c7f26c">
#inline-style {
background: red;
}
</style>
他にも、インラインスタイルからハッシュを生成することができます。 CSP では sha256, sha384, sha512 に対応しています。ハッシュのバイナリー形式は base64 でエンコードされていなければなりません。文字列のハッシュは openssl
プログラムを使ってコマンドラインから取得することができます。
echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64
ハッシュソースを使用すると、特定のインラインスタイルブロックのみを許可することができます。
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='
ハッシュを生成するときは、 <style>
タグを含めないようにし、大文字小文字と、ホワイトスペース、特に前後のホワイトスペースに注意してください。
<style>
#inline-style {
background: red;
}
</style>
安全ではない style 式
'unsafe-eval'
ソース式は、文字列からスタイル宣言を生成するいくつかのスタイルメソッドを制御します。もし 'unsafe-eval'
が style-src
ディレクティブで指定されていなかった場合、以下のメソッドはブロックされて何の効果も現れません。
仕様書
Specification |
---|
Content Security Policy Level 3 # directive-style-src |
ブラウザーの互換性
BCD tables only load in the browser