HTML Academy · レッスン

Content Security Policyのmeta http-equiv

Q: 「Content Security Policyのmeta http-equiv」で何を学びますか？

meta http-equivでContent Security Policyを設定します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

meta http-equivでContent Security Policyを設定します

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

CSPとは

Content Security Policyは、ページが読み込み・実行できるリソースを制限する、ブラウザーが強制するポリシーです。クロスサイトスクリプティング（XSS）に対する最も強力な防御策であり、攻撃者が<script>タグを注入しても、ポリシーで許可されていない限りブラウザーは実行を拒否します。

配信方法は2つ

CSPは、HTTPレスポンスヘッダー（Content-Security-Policy: ...）として送信することも、HTML内のmetaタグ（<meta http-equiv="Content-Security-Policy" content="...">）として指定することもできます。ヘッダーが推奨されますが、サーバーを制御できない場合にはmetaタグが役立ちます。

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.example.com">

主なディレクティブ

default-srcは、指定されていないリソース種別に対するフォールバックです。script-src、style-src、img-src、connect-src（XHR/fetch）、font-src、frame-srcは、それぞれ対応する種類のリソースを制限します。特定のオリジンを許可リストに登録するか、同一オリジンだけを許可するには'self'を使用します。

selfキーワード

'self'（引用符付き）は、ページ自身のオリジンを指します。script-src 'self'は、「ページと同じオリジンでホストされているスクリプトだけを実行する」という意味です。これは多くのポリシーの基本となり、必要に応じて特定の外部CDNを追加します。

インラインスクリプトのブロック

デフォルトでは、CSPはすべてのインライン<script>タグとイベントハンドラー属性（onclick）をブロックします。注入された<script>はインラインであるため実行できず、XSSに対する最も強力な保護になります。すべてのスクリプトを、srcから参照する外部ファイルに移動してください。

Nonceとハッシュ

インラインスクリプトが必要な場合はnonceを使用します。サーバーがリクエストごとにランダムなトークンを生成し、それをCSPのscript-src 'nonce-RANDOM'として設定するとともに、正規の<script>タグにnonce="RANDOM"を追加します。注入されたスクリプトにはnonceがないため、ブロックされます。

<meta http-equiv="Content-Security-Policy"
  content="script-src 'nonce-abc123'">
<script nonce="abc123">// allowed</script>
<script>// blocked — no nonce</script>

unsafe-inlineとunsafe-eval

'unsafe-inline'はインラインスクリプトとインラインスタイルを再び許可します。'unsafe-eval'はeval()とnew Function()を再び許可します。どちらもCSPを大幅に弱めるため、移行中の最後の手段としてのみ使用し、削除する計画を立ててください。

Metaタグの制限

metaタグで配信するCSPでは、report-uriディレクティブやその他のレポート機能を使用できません。また、ヘッダーよりも遅れて有効になるため、metaタグより前にあるものは保護されません。ヘッダーの方が明らかに優れているので、metaタグは代替手段としてのみ使用してください。

Report-Onlyモード

サイトを壊さずに新しいポリシーをテストできます：Content-Security-Policy-Report-Only: ...。ブラウザーは違反を報告しますがブロックはしないため、強制モードに切り替える前に、正規のすべてのリソースを許可するようポリシーを調整できます。

よくある落とし穴

style-src 'unsafe-inline'を忘れると、インラインスタイルがブロックされます（フレームワークが生成することがよくあります）。connect-srcを忘れると、APIへのAJAX通信がブロックされます。まず必ずReport-Onlyモードでポリシーをテストし、コンソールでブロックされたリソースを確認してください。

モダンなCSP戦略

厳格なCSPでは、スクリプトにscript-src 'nonce-RANDOM' 'strict-dynamic'を使用し、それ以外のすべてには厳格な許可リストを設定します。'strict-dynamic'により、nonce付きスクリプトは個々のスクリプトを列挙しなくても追加のスクリプトを読み込めます。これはオリジンごとの許可リストよりもはるかに管理しやすい方法です。

理解度チェック

攻撃者がスクリプトタグの注入に成功した場合でも、CSPはどのようにXSS攻撃を防ぎますか？

まとめ

CSPは、読み込み可能なスクリプト、スタイル、画像などのリソースを制限する、ブラウザーが強制するポリシーです。レスポンスヘッダー（推奨）またはmetaタグで配信します。必要なインラインスクリプトにはnonceを使用し、unsafe-inlineとunsafe-evalは避け、まずReport-Onlyモードでテストします。'nonce-X'と'strict-dynamic'を使う厳格なCSPが、現代における基本方針です。

よくある質問

「Content Security Policyのmeta http-equiv」レッスンは無料ですか？

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

「Content Security Policyのmeta http-equiv」で何を学びますか？

meta http-equivでContent Security Policyを設定しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Content Security Policyのmeta http-equiv」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← HTML Academyに戻る