Vue Academy · レッスン

VueでのContent Security Policy（CSP）

Q: 「VueでのContent Security Policy（CSP）」で何を学びますか？

CSPヘッダー、nonceベースのスクリプト、ハッシュベースのポリシー、ViteのCSP設定 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSPヘッダー、nonceベースのスクリプト、ハッシュベースのポリシー、ViteのCSP設定

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

CSPとは

Content Security PolicyはHTTPレスポンスヘッダーで、スクリプト、スタイル、画像、接続について、ブラウザーが許可するソースを指定します。XSSに対する強力な第二の防御線であり、注入されたスクリプトも、そのソースが許可されていなければブロックされます。

ヘッダー

CSPはContent-Security-Policyレスポンスヘッダーで配信します。各ディレクティブには、リソース種別ごとに許可するソースを指定します。

Content-Security-Policy: default-src 'self'; script-src 'self';

スクリプトのソースを制限する

script-srcディレクティブは、スクリプトの読み込み元を制御します。'self'だけに制限すると、攻撃者が注入する可能性のあるインラインスクリプトやサードパーティスクリプトをブロックできます。

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

unsafe-inlineを避ける

'unsafe-inline'は、インラインスクリプトとイベントハンドラー属性を許可します。これはまさにXSSで悪用される機能です。強固なポリシーではこれを省略し、注入されたインラインコードが実行されないようにします。

unsafe-evalを避ける

'unsafe-eval'はevalとFunctionコンストラクターを許可します。Vue 3のランタイムビルドでは必要ありません（テンプレートは事前コンパイルされます）。そのため、これを除外できますし、除外すべきです。

Nonceベースのインラインスクリプト

インラインスクリプトが本当に必要な場合は、レスポンスごとにランダムなnonceを付与し、そのnonceをポリシーにも記載します。一致するnonceを持つスクリプトだけが実行されます。

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

Nonceがunsafe-inlineより優れている理由

Nonceは予測できず、レスポンスごとに変わるため、スクリプトを注入した攻撃者が推測することはできません。これにより、unsafe-inlineの包括的なリスクを避けながらインラインスクリプトを動作させられます。

CSPとVueのスタイル

Vueや多くのUIライブラリは、実行時にスタイルを注入します。style-srcでnonceまたはハッシュを使って許可するか、CSSをファイルに抽出してstyle-src 'self'で済むようにしてください。

Content-Security-Policy: style-src 'self';

開発用Vite CSP nonceプラグイン

Viteの開発サーバーはスクリプトを注入するため、厳格なCSPと衝突することがあります。CSP nonceプラグインを使うと、開発中にViteが注入するタグへ一致するnonceを付与できます。

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

API用のconnect-src

connect-srcでアプリがfetchできる接続先を制限し、注入されたコードが攻撃者の管理するドメインへデータを持ち出せないようにしてください。

Content-Security-Policy: connect-src 'self' https://api.example.com;

Report-Onlyモード

Content-Security-Policy-Report-Onlyを使ってCSPを安全に導入できます。このモードでは違反を報告するだけでブロックは行わないため、適用前にポリシーを調整できます。

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

確認テスト

XSS対策を強固に保つために、どのCSPディレクティブの値を避けるべきですか？

まとめ

CSPは、スクリプト、スタイル、接続で許可するソースを制限するHTTPヘッダーです。XSSが侵入しても、注入されたコードをブロックできます。unsafe-inlineとunsafe-evalを避け、必要なインラインスクリプトにはレスポンスごとのnonceを使用し、開発時にはVite CSP nonceプラグインを使ってください。適用する前にReport-Onlyモードで導入します。

よくある質問

「VueでのContent Security Policy（CSP）」レッスンは無料ですか？

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

「VueでのContent Security Policy（CSP）」で何を学びますか？

CSPヘッダー、nonceベースのスクリプト、ハッシュベースのポリシー、ViteのCSP設定ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「VueでのContent Security Policy（CSP）」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る