CSP Level 2 の出力例

1. このページの目的

このページに、CSP Level 2 を設定する。

2. このページで出力しているCSP用のHTTPヘッダ

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-pvTbo6eMpnRCkCmdcmDYrl4ZT4g=' 'nonce-7gDA2ww3AZVnlN9yHHM8x2F4MT0=' www.googletagmanager.com cdnjs.cloudflare.com;
  style-src 'self' 'nonce-jy0KdxlwDUr7oqZylMCyLJToc/8=' cdn.jsdelivr.net cdnjs.cloudflare.com;
  img-src 'self' www.google-analytics.com;
  connect-src 'self' www.google-analytics.com;

実際は1行で、改行してはいけない。セミコロンの部分以外ではスペース区切りしている。
Chrome DevTools の Console パネルに表示される CSP エラーを見ながら必要な項目を追加し、エラーを潰していけばよい。

3. メモ


許可したいもの	許可するための記述（ソースの指定）
そのサーバー上にあるファイルの読み込み(.css, .js, .png など)	'self' を指定する。
インラインCSS, JavaScript	nonce を利用する。 nonce の値は base64エンコードした値なのだが、エンコード前の値は 128bits 以上ないといけない。（Content Security Policy Level 2）参考：CSP 用 nonce 値を生成する
外部サーバー（クロスオリジン）上のファイルの読み込み	ドメインを指定する。
イベントハンドラ属性例：`<button onclick="alert(1)">ボタン</button>`	許可するのが難しいので、利用しない。リファクタリングする。

CSP Level 2 の出力例

1. このページの目的

2. このページで出力しているCSP用のHTTPヘッダ

3. メモ

4. 参考