Frontend Academy · レッスン

Content Security Policy：nonceとhash

インラインスクリプトにはnonce、既知のスニペットにはハッシュを使い、本番環境で違反を監視するreport-uriを設定した厳格なCSPを記述します。

「Content Security Policy：nonceとhash」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

CSPのまとめ

CSPは、ブラウザによる読み込みを許可する対象（スクリプト、スタイル、画像、フォント、フレーム、接続）をホワイトリスト化するHTTPヘッダーです。多層防御の一環として、XSSがフィルターをすり抜けても、CSPによってペイロードを阻止できることが多くあります。

CSPヘッダーの構造

各ディレクティブには、許可するソースを列挙します。'self'は同一オリジンを意味します。特定のURLも許可できます。

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

一般的なディレクティブ

default-src：すべてに対するフォールバック。script-src：JavaScript。style-src：CSS。img-src：画像。connect-src：fetch/XHR/WebSocket。font-src：フォント。frame-ancestors：あなたのサイトをiframeに埋め込めるサイト（クリックジャッキング対策）。

'unsafe-inline' — よくある抜け穴

多くのサイトでは、インラインの<script>タグやonclick属性を許可するために'unsafe-inline'を追加しています。これではCSPの主な目的が失われ、XSSペイロードがインラインで実行される可能性があります。nonceまたはハッシュに置き換えます。

Nonce — 一度だけの許可リスト

リクエストごとにランダムなnonceを生成します。正規のインラインスクリプトにそのnonceを付けます。ブラウザは、一致するnonceを持つスクリプトだけを許可します。

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

nonceを'strict-dynamic'と組み合わせます。信頼されたスクリプト（nonceを持つスクリプト）は、追加のスクリプトを読み込めます。すべてのスクリプトソースURLを列挙する必要がなくなります。現在のCSPにおけるベストプラクティスです。

ハッシュ — 静的な許可リスト

既知の固定されたインラインスクリプト（たとえば、ビルドで常に同じbootstrapスニペットが出力される場合）には、そのSHA-256を計算してハッシュソースとして追加します。リクエストごとのnonceは必要ありません。

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

インラインスタイルのハッシュ

インラインの<style>タグにも同じ仕組みを使えます。ハッシュを計算してstyle-srcに追加します。CSSでは'unsafe-inline'よりも優れた方法です。

CSPのレポートモード

Content-Security-Policy-Report-Onlyを使用すると、適用せずにポリシーをテストできます。違反はエンドポイントに報告されますが、何もブロックされません。CSPを段階的に導入するのに適しています。

Content-Security-Policy-Report-Only: 
  default-src 'self';
  report-uri /csp-violations

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to（最新）

report-toとReporting-Endpointsは、report-uriに代わる最新の仕組みです。同じデータを、より構造化された形式で扱えます。

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

フレームワークとの統合

Next.js：middleware.tsまたはnext.config.jsのheadersでCSPを設定します。Nuxt：nuxt-securityモジュールを使用します。Vite：開発サーバーのheadersを設定し、本番環境ではホスト（Vercel、Netlify）のheaders設定を使用します。

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

CSPのテスト

DevTools → Consoleを開くと、CSP違反が記録されています。https://csp-evaluator.withgoogle.com/を使用してポリシーを評価します。本番環境ではまずReport-Onlyモードを使用し、すべての違反を修正してから適用します。

確認問題

script-srcディレクティブの'unsafe-inline'がCSPの弱点と見なされるのはなぜでしょうか。

まとめ：CSPのベストプラクティス

リソースの種類ごとにディレクティブを設定したContent-Security-Policyヘッダーを付けます。'unsafe-inline'は避け、nonce + 'strict-dynamic'またはSHAハッシュを使用します。frame-ancestors 'none'（または'self'）を設定します。まずReport-Onlyモードでテストします。違反を/csp-violationsに送信するか、最新のreport-toを使用します。フレームワークでは、ミドルウェアまたは設定のheadersを通じてCSPをサポートできます。

よくある質問

「Content Security Policy：nonceとhash」レッスンは無料ですか？

はい。「Content Security Policy：nonceとhash」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Content Security Policy：nonceとhash」で何を学びますか？

インラインスクリプトにはnonce、既知のスニペットにはハッシュを使い、本番環境で違反を監視するreport-uriを設定した厳格なCSPを記述します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Content Security Policy：nonceとhash」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る