以前、クリックジャグリングを調べた時の対策としてContent Security Policyによる対策を知ったが、書き方が古くなっていたので再調査した
古い例
X-Content-Security-Policy: allow 'self'; frame-ancestors *.ipa.go.jp *.meti.go.jp
現在の構文
Content-Security-Policy: <policy-directive>; <policy-directive>
自身のサイトに合わせた設定を考える
- コンテンツはサイト自身のドメインから取得させたい
- 画像はcloudinaryから
- inline scriptの実行も許可する
Content-Security-Policy: default-src 'self'; img-src 'self' res.cloudinary.com; script-src 'self' 'unsafe-inline'
CSP Level 3 におけるJavaScriptの実行を制限
上記までの方法はCSP Level 2によるものだが、まだドラフト版だがCSPの新しいスタンダードであるCSP Level 3が策定されている
Content Security Policy Level 3
JavaScriptの実行を制限について、CSP Level 3ではnonceにより制限が推奨されている
ポリシーを送信するたびに一意のnonce値を生成し、それと同じnonce値をHTML内の各scriptタグにnonce属性として付与する
content-security-policy: script-src 'nonce-<base64-value>'
<script src="/js/bundle.js" nonce="<base64-value>"></script>
しかし、動的にscriptタグを生成してDOMに追加することがあるため導入がむずかしい
そこで、strict-dynamicというディレクティブを使用する
strict-dynamic
content-security-policy: script-src 'nonce-<base64-value>' 'strict-dynamic'
strict-dynamicを使用すると、許可したscriptが生成する子script、孫scriptにも実行権限が伝播していくので、動的に生成されたscriptタグでも実行が可能になる
しかし、今のところstrict-dynamic対応しているブラウザが限られる（safariが対応していない）ため、nonceのみが有効になり、動的に生成されたscriptが実行されない問題があるため利用ブラウザ対応状況を考えなくてはならない
参考
https://inside.pixiv.blog/kobo/5137
