CSP: style-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" type="text/css" />

<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 を無効にすることで防ぐことができます。

Note: インラインスタイルとインラインスクリプトを禁止することは、 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>

'unsafe-eval' ソース式は、文字列からスタイル宣言を生成するいくつかのスタイルメソッドを制御します。もし 'unsafe-eval' が style-src ディレクティブで指定されていななかった場合、以下のメソッドはブロックされて何の効果も現れません。

• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule()
• CSSStyleDeclaration.cssText

• Content-Security-Policy
• style-src-elem (en-US)
• style-src-attr (en-US)
• Link header
• <style>, <link>
• @import
• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule()
• CSSStyleDeclaration.cssText