CSP (Contents Security Policy) の記述例

記述例
- メモ
- その他のメモ
参考

記述例

デフォルト設定の記述をする(HTTPレスポンスヘッダの出力)。
- 同一オリジンも含めて全てのソース¹からの読み込みを禁止する場合
```
Content-Security-Policy: default-src 'none';
```
- 同一オリジンを除く全てのソースからの読み込みを禁止する場合
  - default-src を使うと、child-src,
    connect-src, font-src, img-src, media-src, object-src, script-src, style-srcに対してまとめてポリシーを指定できる。詳しくは → http://www.w3.org/TR/CSP2/#directive-default-src を参照すること。
```
Content-Security-Policy: default-src 'self';
```
必要であれば、各ソースに対する個別設定を後ろに追加して設定を上書きしていく(セミコロン区切り)。
- 最初に全てのソースを禁止した上で、特定のソースの設定を上書きしていく場合
  - 以下では、script-src に対し「同一オリジン」「www.google-analytics.com」「platform.twitter.com」を追加し、更に「nonce-xxxxxx」も追加している。
```
Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com platform.twitter.com 'nonce-xxxxxx';
```
- 最初に同一オリジンのみ許可した上で、特定のソースの設定を上書きしていく場合
  - 以下では、script-src に対し「同一オリジン」「www.google-analytics.com」「platform.twitter.com」を追加し、更に「nonce-xxxxxx」も追加している。
```
Content-Security-Policy: default-src 'self'; script-src 'self' www.google-analytics.com platform.twitter.com 'nonce-xxxxxx';
```
- メモ
  - 最初に default-src で ‘self’ を指定しておき、あとから特定のソースの設定を上書きする場合、’self’ が必要なら、再度指定する必要がある。
  - 設定が間違っていればブラウザの開発者ツール（コンソール）にエラーが出力されるので、そのエラーメッセージを見ながら必要なホストを必要なディレクティブに追加していけばよい。
  - <script>タグ内に記述されたインラインのJavaScriptに対しては、nonce属性を追加していく。Firefoxはnonceに対応していないので、その場合(User-Agnetで判定して)は仕方ないが ‘unsafe-inline’ を指定する(これじゃダメ？)。

メモ

上記の書き方で、Google Analytics や Twitter 等のボタンをウェブの画面に貼り付ける場合の設定を書くことができた。ただ、はてなブックマークのボタンはいろいろJavaScriptでやっているため対応するのが非常に面倒で途中でやめた。
以下のページを参照しながら書けばよさそう。
- Content Security Policy Level 2
  - http://www.w3.org/TR/CSP2/
- Content Security Policy Reference & Examples
  - http://content-security-policy.com/

その他のメモ

Firefox は nonce に対応していない（その後、対応したようだ）。
Data URL scheme を許可する場合は、例えば img-src 'self' data:; といった記述になる。
React では、タグに対して onClick={ ... } のような記述を行うが、あれは実際にはインラインな記述にはならないので問題ない。
HTMLのタグに対して style属性を直接書くのも禁止されるのは結構面倒だと思う。
script-src ‘self’ とした場合にどういう挙動になるか？
- 外部のJavaScriptの読み込みは禁止
- インラインの script は禁止
- イベント属性は禁止
  - これは不便かもしれない。