Cloudflare Pages で実現するセキュアな静的サイト配信

Cloudflare Pages は静的サイトのホスティングに最適なプラットフォームです。この記事では、実際のデプロイ構成と、_headers ファイルを使ったセキュリティ設定について紹介します。

デプロイ構成：Worker をやめて Pages に戻した理由

当初、お問い合わせフォームのバックエンド処理を Cloudflare Worker で行う予定でした。Worker であればサーバーサイドでメール送信やバリデーションが可能です。

しかし、実際に構成してみると以下の課題がありました：

ビルドの複雑化：Astro のビルド出力を Worker で配信するには追加設定が必要
デバッグの手間：ローカルでの wrangler dev と本番の挙動差異
キャッシュ制御：Pages のほうが Cloudflare CDN との統合が自然

最終的に、お問い合わせフォームは ssgform.com という外部サービスを利用することで、サーバーサイド処理を完全に排除しました。これにより、Worker の必要がなくなり、純粋な静的サイトとして Pages にデプロイできるようになりました。

_headers によるセキュリティ設定

Cloudflare Pages では、public/_headers ファイルに HTTP レスポンスヘッダーを記述できます。以下は実際に使用している設定の抜粋です。

Content-Security-Policy（CSP）

CSP はクロスサイトスクリプティング（XSS）攻撃を防ぐための重要なヘッダーです。許可するリソースの取得元をホワイトリスト方式で指定します。

Content-Security-Policy: default-src 'self';
  script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com https://pagead2.googlesyndication.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://wsrv.nl https://images.unsplash.com data:;
  connect-src 'self' https://challenges.cloudflare.com https://pagead2.googlesyndication.com;
  frame-src https://challenges.cloudflare.com https://googleads.g.doubleclick.net;
  form-action https://ssgform.com;

ポイントは以下のとおりです：

script-src：Cloudflare Turnstile（challenges.cloudflare.com）と AdSense を許可
img-src：画像プロキシの wsrv.nl と Unsplash を許可
form-action：ssgform.com のみにフォーム送信を制限
frame-src：Turnstile の iframe と AdSense の広告フレームを許可

その他のセキュリティヘッダー

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

X-Content-Type-Options：MIME スニッフィングを防止
X-Frame-Options：クリックジャッキング対策として iframe 埋め込みを禁止
Referrer-Policy：クロスオリジンではオリジンのみ送信
Permissions-Policy：不要なブラウザ API（カメラ・マイク・位置情報）を無効化

キャッシュ制御

静的アセットには長期間のキャッシュを設定し、HTML には短めのキャッシュを設定しています。

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=3600

Astro が出力する _astro/ ディレクトリのファイルにはコンテンツハッシュが含まれるため、immutable で1年間キャッシュしても安全です。HTML は更新頻度がある程度あるため、1時間のキャッシュに留めています。

Pages デプロイの設定

Cloudflare Pages のプロジェクト設定はシンプルです：

項目	設定値
ビルドコマンド	`npx astro build`
出力ディレクトリ	`dist`
Node.js バージョン	22

GitHub リポジトリを接続すれば、main ブランチへの push で自動デプロイされます。プレビューデプロイも PR ごとに自動生成されるため、レビューが捗ります。

まとめ

「サーバーサイド処理が本当に必要か？」を見極めることが大切です。外部サービスの活用で Worker を排除でき、結果的にデプロイもセキュリティ管理もシンプルになりました。_headers での CSP 設定は最初こそ手間ですが、一度書けばすべてのページに適用されるため、コストパフォーマンスの高いセキュリティ施策です。