どう設定するか
レスポンスヘッダーとして設定 (推奨)
CSPはサーバー側でHTTPレスポンスヘッダーとして設定するのが基本です。
この方法では、サーバーからのレスポンスに含まれるCSPヘッダーが、ブラウザに対してそのページに適用されるセキュリティポリシーを伝えます。
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
・全ページに一貫したセキュリティポリシーを適用できる。
・ヘッダーはHTMLのレンダリング前に適用されるため、より早い段階でセキュリティ対策が有効になる。
・ポリシーがサーバー側で集中管理されるため、メンテナンスが容易。
ページの初期ロード時に発生する攻撃を防ぎたい場合は、サーバーヘッダーでの設定が推奨されます。
HTMLファイル内にタグを埋め込む形で設定
CSPはHTMLファイル内でタグを使っても設定できます。
この方法は、サーバー設定が難しい場合や、特定のページだけに異なるポリシーを適用したい場合に役立ちます。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com;">
・特定のページだけに異なるポリシーを設定する場合に便利。
・サーバー設定が難しい場合でも、CSPを導入可能。
・CSPの設定をHTML内のタグで行うと、ポリシーがHTMLの読み込み後に適用されるため、ヘッダーによる設定に比べるとセキュリティ的には若干劣ることがあります。
参考サイト