そもそも CSP とは
CSP は Content Security Policy（コンテンツ・セキュリティ・ポリシー） の略称です。
ブラウザに対して 「このサイトは何を読み込んでよいか」 を指示するセキュリティルールで、主に XSS（クロスサイトスクリプティング）攻撃を防ぐための仕組みです。
XSS は、攻撃者が悪意ある JavaScript をページに注入し、以下のようなことが可能になります。
- Cookie を盗む
- ログイン状態を乗っ取る
- フォーム内容を盗む
- 任意の操作をさせる
CSP はこれらを ブラウザ側で強制的にブロックします。
Cloudflare Pages のセキュリティヘッダ
Cloudflare Pages では、public/_headers にヘッダを記述するだけで、強力な CSP を適用できます。
外部リソースを使わない構成であれば、XSS を大幅に削減できます。
今回設定した CSP の内容と解説
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self' data: blob:;
font-src 'self';
connect-src 'self';
object-src 'none';
frame-src 'self' blob:;
base-uri 'self';
form-action 'none';
frame-ancestors 'none';
default-src 'self'
すべてのリソースのデフォルト読み込み先を 自サイトのみ に限定します。
外部 JS・CSS・画像・iframe などは、個別に許可しない限り読み込めません。
script-src 'self'
JavaScript は 自サイトのファイルのみ 読み込み可能です。
- 外部 CDN（Google / Cloudflare / jsDelivr）→ 読み込めない
- インライン JavaScript →
'unsafe-inline'がないため禁止 - eval() →
'unsafe-eval'がないため禁止
style-src 'self'
CSS も 自サイトのファイルのみ 読み込み可能です。
- インライン style → 禁止
- Google Fonts や外部 CSS → 禁止
そのため、style="display:none" を使えず、CSS クラスで非表示を実現しています。
img-src 'self' data: blob:
画像は以下のみ許可されます。
- 自サイトの画像
-
data:URL（Base64 画像） -
blob:URL（PDF プレビューで使用）
外部画像は読み込めません。
font-src 'self'
フォントは 自サイトのものだけ 読み込み可能です。
Google Fonts など外部フォントは使えません。
connect-src 'self'
fetch / XHR / WebSocket の通信先を 自サイトのみ に限定します。
外部 API を呼ぶ機能を追加すると通信できません。
object-src 'none'
Flash・Java・PDF プラグインなど、古いブラウザプラグインを完全禁止します。
攻撃面をゼロにできます。
frame-src 'self' blob:
iframe の読み込み元を以下に限定します。
- 自サイト
- blob URL（PDF プレビュー用）
外部サイトの iframe は読み込めません。
base-uri 'self'
<base> タグの URL を自サイトに限定します。
攻撃者が <base> を書き換えてリンク先を乗っ取る攻撃を防ぎます。
form-action 'none'
フォーム送信を 全面禁止 します。
- CSRF が完全に無効化される
- ログインフォームや問い合わせフォームを追加すると送信できない
→ 必要になったら'self'に変更する必要あり
frame-ancestors 'none'
他サイトがあなたのページを iframe に埋め込むことを完全禁止します。
クリックジャック対策として最強の設定です。
X-Frame-Options: DENY と二重で防御しています。
まとめ
Cloudflare Pages は「静的ホスティング」というイメージが強いですが、
public/_headers を使うことで 強力なセキュリティヘッダを簡単に適用できるプラットフォームになります。
外部リソースを使わない構成であれば、今回のように CSP を 'self' のみに限定することで、強固な Web アプリを構築できます。