CSP: style-src

HTTP の Content-Security-Policy (CSP) の style-src ディレクティブは、スタイルシートの有効なソースを指定します。

style-src ポリシーには、１つまたは複数のソースが許可されています。

Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src <source> <source>;

<source> は以下のうちの一つを取ることができます。

<host-source>

ホスト名または IP アドレスによるインターネットホストで、任意で URL スキームやポート番号を付けることができます。サイトのアドレスはワイルドカード (アスタリスク文字、'*') で始めることができ、更にポート番号にワイルドカード ('*') を使ってすべての有効なポート番号をソースとして示すことができます。
例:

• http://*.example.com: http: のスキームを使用した、example.com のすべてのサブドメインからのすべての読み込みの試行に一致します。
• mail.example.com:443: mail.example.com の 443番ポートへのアクセスの試行に一致します。
• https://store.example.com: https: を使用した store.example.com へのアクセスの試行に一致します。
• *.example.com: 現在のプロトコルを使用した example.com のすべてのサブドメインからの読み込みのすべての試行に一致します。

<scheme-source>

http: または https: のようなスキームです。コロンは必要です。以下の他の値とは異なり、単一引用符は使用しないでください。data スキームも指定することができます (非推奨)。

• data: コンテンツのソースとして data: の URI を使うことができるようにします。これは安全ではありません。攻撃者は任意の data: URI を挿入することもできます。使用は控え、スクリプトには絶対に使用しないでください。
• mediastream: mediastream: の URI (en-US) をコンテンツのソースとして使用することができるようにします。
• blob: blob: の URI をコンテンツのソースとして使用することができるようにします。
• filesystem: filesystem: の URI をコンテンツのソースとして使用することができるようにします。

'self'

保護された文書が提供されたオリジンを、同じ URL スキームおよびポート番号で参照します。単一引用符が必要です。ブラウザーによっては source ディレクティブから blob および filesystem を独自に除外していることがあります。これらのコンテンツ種別を許可する必要があるサイトは、Data 属性を使用して指定することができます。

'unsafe-eval'

文字列からコードを生成する eval() および同様のメソッドの利用を許可します。単一引用符が必要です。

'unsafe-hashes'

特定のインラインのイベントハンドラーを許可します。インラインイベントハンドラーを許可したいが、インラインの <script> 要素や javascript: URL は不要な場合、これは unsafe-inline を使うよりも安全なメソッドです。

'unsafe-inline'

インラインの <script> 要素、javascript: の URL、インラインイベントハンドラー、インライン <style> 要素のような、インラインリソースの使用を許可します。単一引用符が必要です。

'none'

空のセットを参照します。つまり、一致する URL はありません。単一引用符が必要です。

'nonce-<base64-value>'

暗号化ノンス (一度だけ使われる数値) を使用する特定のインラインスクリプトのための許可リストです。サーバーはポリシーを転送するたびに固有のノンスを生成する必要があります。リソースのポリシーを回避することを難しくするため、推測できないノンスを提供することが重要です。例えば安全でないインラインスクリプトを参照してください。ノンスを指定すると、最近のブラウザーは、ノンスの対応がない古いブラウザーのために設定されている可能性がある 'unsafe-inline' を無視するようになります。

'<hash-algorithm>-<base64-value>'

スクリプトまたはスタイルの sha256, sha384, sha512 の何れかのハッシュです。このソースは、ハッシュを生成するために使用する暗号化アルゴリズムと、スクリプトまたはスタイルのハッシュを base64 でエンコードしたものの二つの部分をダッシュで区切ったもので構成されます。ハッシュを生成するときは、<script> または <style> タグを含めないようにし、大文字・小文字の区別と、ホワイトスペースの扱い (先頭や末尾のホワイトスペースを含む) に注意してください。例えば安全でないインラインスクリプトを参照してください。 CSP 2.0 では、これはインラインスクリプトにのみ適用されます。 CSP 3.0 では script-src で外部スクリプトが指定された場合にも利用できます。

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

インラインスタイルを許可するために、 '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 に対応しています。

Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'

ハッシュを生成するときは、 <style> タグを含めないようにし、大文字小文字と、ホワイトスペース、特に前後のホワイトスペースに注意してください。

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

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

• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule() (en-US)
• CSSStyleDeclaration.cssText

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