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

構文

Content-Security-Policy: style-src 'none';Content-Security-Policy: style-src <source-expression-list>;

このディレクティブは、次のいずれかの値を指定することができます。

'none'

この種類のリソースは読み込まれません。単一引用符は必須です。

<source-expression-list>

ソース表現の値を空白で区切ったリストです。この種類のリソースは、指定されたソース表現のいずれかと一致した場合に読み込まれます。このディレクティブでは、以下のソース表現の値が適用できます。

• <host-source>
• <scheme-source>
• 'self'
• 'unsafe-inline'
• 'unsafe-hashes'
• 'nonce-<nonce_value>'
• '<hash_algorithm>-<hash_value>'
• 'report-sample'

なお、仕様書では有効なソース表現値として'unsafe-eval' も記載されています。これは、さまざまなインターフェイスにおけるinsertRule() メソッドやcssText セッター、例えばCSSStyleSheet.insertRule() やCSSStyleDeclaration.cssText など、 CSS 文字列を解析および挿入する CSSOM のメソッドを許可するためです。しかし、現在、これらのメソッドをブロックするブラウザーはないため、unsafe-eval を適用する必要はありません。

例

違反する場合

この 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>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'、ノンスhソース、ハッシュソースのいずれかを一致するインラインブロックに指定できます。次のコンテンツセキュリティポリシーに従うことで、<style> 要素や、あらゆる要素のstyle 属性のようなインラインスタイルが許可されます。

Content-Security-Policy: style-src 'unsafe-inline';

上記のコンテンツセキュリティポリシーは<style> 要素やあらゆる要素のstyle 属性などのインラインスタイルを許可します。

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

特定のインラインスタイルブロックのみを許可するには、 nonce-source を使用することができます。（暗号的に安全なランダムトークンジェネレータを使用して）ランダムな nonce 値を生成し、それをポリシーに含める必要があります。この nonce 値は、 HTTP リクエストごとに一意である必要があるため、動的に生成する必要があることに注意することが重要です。

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>

仕様書

ブラウザーの互換性

関連情報

• Content-Security-Policy
• style-src-elem
• style-src-attr
• Link ヘッダー
• <style>,<link>
• @import
• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule()
• CSSStyleDeclaration.cssText