【入門編】CSP報告用エンドポイント(report-uri/report-to)の構築 – アプリケーションセキュリティ & 安全な開発防御ガイド

家の「防犯カメラ」を設置しよう!CSP違反レポートでサイトの死角をなくす方法

こんにちは!セキュリティの世界へようこそ。
日々、アプリケーション開発やインフラ運用に奮闘している皆さん、本当にお疲れ様です。

今日は、皆さんのWebサイトという「大事な家」を守るための、少し高度だけど実はとっても頼りになる「防犯カメラ」のお話をします。セキュリティの専門用語でいう「CSP(Content Security Policy)レポート」という仕組みです。

難しい設定に見えるかもしれませんが、順を追って一緒に見ていきましょう。

—

そもそも「CSP」って何?:家の門番の話

WebサイトにおけるCSPとは、一言でいえば「誰がこの家に入ってきていいか、何をしてもいいかを厳格に決めた門番」です。

通常、Webサイトは外部からスクリプト(プログラム)を読み込んで動くことが多いですよね。でも、もし悪い泥棒が勝手に怪しいスクリプトを紛れ込ませたらどうなるでしょう? そう、皆さんのサイトが乗っ取られたり、ユーザーの個人情報が盗まれたりしてしまいます。

そこで、CSPという「門番」にこう伝えます。
「信頼できるサイトAとサイトB以外のスクリプトは、一切実行させないで!」

これがCSPの役割です。しかし、この門番、たまに「真面目すぎて大事な荷物まで追い返してしまう(=サイトが正しく表示されなくなる)」ことがあります。そこで必要になるのが、「報告書(レポート)」です。

なぜ「レポート用エンドポイント」が必要なのか?

皆さんがどんなに完璧な門番を雇っても、時にはミスが起きます。

  • 新しい機能を追加したら、大事なスクリプトが門番に拒否されて動かなくなった。
  • そもそも、攻撃者が皆さんのサイトを狙って、変なスクリプトを注入(インジェクション)しようと試みている。

これらを放置すると、サイトが壊れるか、泥棒に侵入されるかの二択になってしまいますよね。

そこで、門番が不審な動きを察知したり、設定で拒否した通信が発生したときに、ブラウザからこっそりと「今、こんな怪しい試みがありましたよ!」と報告を飛ばしてもらう仕組みを作ります。それが「CSP報告用エンドポイント」です。

—

実際に防犯カメラ(報告用エンドポイント)を作ってみよう

報告を受け取るためのサーバー側の準備は、実はシンプルです。受け取ったデータをJSON形式でログに保存するAPIを一つ作るだけです。

ここでは、Node.js(Express)を例にした簡単な実装イメージを紹介しますね。

// 報告を受け取るためのエンドポイントの例
app.post(‘/csp-report’, (req, res) => {
// ブラウザが送ってきたレポートデータ(JSON)を取得
const report = req.body;

// ログに保存して後で分析できるようにする
// 実際にはデータベースや監視ツール(ELKスタックなど)に送るのがおすすめ!
console.log(‘【セキュリティ警告】CSP違反が検知されました:’, JSON.stringify(report, null, 2));

// ブラウザに対しては「受け取ったよ」と返す
res.status(204).send();
});

ブラウザに「報告を送ってね」と伝えるヘッダー設定

次に、Webサーバーの設定で「違反があったらここに報告してね」という指示を出します。HTTPレスポンスヘッダーに以下のように記述します。

Content-Security-Policy: default-src ‘self’; report-uri /csp-report;

  • default-src 'self':基本的には自分のサイト内のものしか信じない。
  • report-uri /csp-report:違反があったら、さっき作ったエンドポイントに報告を送ってね。

—

運用で気をつけるべき「プロの視点」

ここから先は、少しだけ現場の泥臭いお話です。

1. 報告データは「宝の山」

レポートには「どのページで」「どの怪しいスクリプトが」「どのタイミングで」実行されようとしたか、詳細な情報が詰まっています。これを眺めていると、「攻撃者が今、どんな手口で入り込もうとしているか」という予兆が見えてくることがあります。これぞまさにセキュリティ担当者の特権です。

2. 「Report-Only」モードから始める

いきなり厳格な門番を雇うと、サイトが真っ白になってユーザーに迷惑をかけるかもしれません。まずは「テスト運転」をしましょう。

Content-Security-Policy-Report-Only: default-src ‘self’; report-uri /csp-report;

Report-Only をつけると、門番は「怪しいよ!」と報告はしますが、通信をブロックはしません。 これで安心して、どのスクリプトが引っかかるのかをテストできます。

3. エンドポイントの保護も忘れずに

報告を受け取るエンドポイント自体が、大量の偽レポート攻撃(DoS攻撃)を受けるリスクもゼロではありません。受け取ったデータのバリデーション(正しい形式か確認すること)はしっかり行いましょう。

—

最後に:完璧を目指さず、一歩ずつ

セキュリティ対策に「これで完成!」という終わりはありません。
でも、今日お伝えした「防犯カメラ」を設置しておくだけで、皆さんのサイトの安全性は格段に上がります。

まずは Report-Only モードで自分のサイトがどう見られているか、どんな通信が発生しているかを確認することから始めてみませんか?

「何かが起きる前」に気づくこと。それが最強の防御です。
皆さんの開発ライフが、より安全で楽しいものになりますように!応援しています。

コメント

タイトルとURLをコピーしました