CSP: style-src
==============

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

|  |  |
| --- | --- |
| CSP バージョン | 1 |
| ディレクティブ種別 | フェッチディレクティブ |
| `default-src` による代替 | あり。このディレクティブがない場合、ユーザーエージェントは `default-src` ディレクティブを探します。 |

構文
--

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


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

### ソース

`<source>` は、 CSP ソース値にあるいずれかの値を取ることができます。

なお、この同じ値のセットはすべてのフェッチディレクティブ（と 他の多くのディレクティブ）で使用できます。

例
-

### 違反する場合

この CSP ヘッダーがある場合、


```http
Content-Security-Policy: style-src https://example.com/
```


以下のスタイルシートはブロックされ、読み込まれません。


```html
<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` ヘッダーで読み込まれるものも同様です。


```http
Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet
```


インラインの style 属性もブロックされます。


```html
<div style="display:none">Foo</div>
```


JavaScript で直接 `style` 属性を設定したり、 `cssText` を設定したりしたスタイルも同様です。


```js
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";
```


しかし、要素の `style` プロパティに直接設定されたスタイルプロパティはブロックされず、 JavaScript から安全にスタイルを操作することができます。


```js
document.querySelector("div").style.display = "none";
```


この手の操作は、 CSP の `script-src` ディレクティブで JavaScript を無効にすることで防ぐことができます。

### 安全ではないインラインスタイル

**メモ:** インラインスタイルとインラインスクリプトを禁止することは、 CSP が提供する最大のセキュリティ上の利点の一つです。しかし、どうしても使用しなければならない場合は、それらを許可する仕組みがいくつかあります。

インラインスタイルを許可するために、 `'unsafe-inline'` を指定するか、インラインブロックに一致するノンスソースまたはハッシュソースを指定することができます。


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


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


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

<div style="display:none">Foo</div>
```


ノンスソースを使用して、特定のインラインスタイルのみ許可することができます。


```http
Content-Security-Policy: style-src 'nonce-2726c7f26c'
```


同じノンスを `<style>` 要素にも設定する必要があります。


```html
<style nonce="2726c7f26c">
 #inline-style {
 background: red;
 }
</style>
```


他にも、インラインスタイルからハッシュを生成することができます。 CSP では sha256, sha384, sha512 に対応しています。ハッシュの**バイナリー**形式は base64 でエンコードされていなければなりません。文字列のハッシュは `openssl` プログラムを使ってコマンドラインから取得することができます。


```bash
echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64
```


ハッシュソースを使用すると、特定のインラインスタイルブロックのみを許可することができます。


```http
Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='
```


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


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

### 安全ではない style 式

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

* `CSSStyleSheet.insertRule()`
* `CSSGroupingRule.insertRule()`
* `CSSStyleDeclaration.cssText`
仕様書
---

| Specification |
| --- |
| Content Security Policy Level 3 # directive-style-src |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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