はじめに
CSPについて勉強して理解した内容をまとめる。
CSP(Content Security Policy)とは？
Webブラウザに対してコンテンツの読み込みや実行を制御するセキュリティ機構
信頼されたリソースのみを読み込むことを強制することで、信頼されていないコードの実行を防ぐ
CSPの効果
- XSS対策：インラインスクリプトや外部スクリプトの制限が可能
- データ送信制御：悪意のあるドメインへのデータ送信をブロック
基本的な設定
CSPはHTTPレスポンスヘッダで定義する。以下はCSPの設定例
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self';
-
default-src 'self'
→ 全リソースのデフォルトの読み込み元を自分自身のドメインに限定する -
script-src 'self' https://trusted.cdn.com
→ JavaScriptは自ドメインと指定のCDNからのみ読み込みを許可 -
style-src 'self'
→ CSSの読み込み元を自ドメインに限定（インラインスタイルは許可されない）
よく使われるディレクティブ（制限の種類）
- default-src：全体のデフォルトソースを指定
- script-src ：JavaScriptの読み込み元を指定
- style-src：CSSの読み込み元を指定
- img-src：画像の読み込み元を指定
- connect-src：Fetch/XHR/WebSocket などの接続先を指定
- object-src ：
<object>,<embed>などの使用可否を指定 - frame-src：
<iframe>の読み込み元を指定 - report-uri / report-to：CSP違反時のレポート送信先を指定
CSP有効化対応例1 （インラインスクリプト）
HTTPヘッダーのCSPに次のように記述しているとインラインスクリプト（HTML内に直接書かれたjavascript）はブロック対象になる
Content-Security-Policy: script-src 'self';
インラインスクリプトの例
<!-- onclick属性 -->
<button onclick="alert('message')">クリック</button>
<!-- scriptタグ -->
<script>
console.log('message');
</script>
CSPでインラインスクリプトを使う方法 （nonceの使用）
1 サーバーがランダムな文字列（例：abc123xyz）を生成
2 HTMLのインラインスクリプトに nonce="abc123xyz" をつける
<script nonce="abc123xyz">
console.log('message');
</script>
3 HTTPヘッダーのCSPに script-src 'nonce-abc123xyz’ を含める
Content-Security-Policy: script-src 'nonce-abc123xyz';
4 ブラウザは、CSPで指定されたnonceを持つスクリプトのみを実行する
※nonceは毎回ランダムに生成される一意の文字列である必要がある（再利用しない）
CSP有効化対応例2 （インラインスタイル）
HTTPヘッダーのCSPに次のように記述しているとインラインスタイルはブロック対象になる
Content-Security-Policy: style-src 'self';
インラインスタイルの例
<p style="color: red; font-weight: bold;">message</p>
CSPでブロックされないようにするための方法
スタイルは 外部CSSファイルに切り出す
.important-text {
color: red;
font-weight: bold;
}
<p class="important-text">message</p>
CORSとの違い
CSPとCORSはどちらもWebセキュリティに関する仕組みだが、目的や制御の対象が異なる。以下の表でその違いを整理する。
| 項目 | CSP（Content Security Policy） | CORS（Cross-Origin Resource Sharing） |
|---|---|---|
| 主な役割 | ブラウザでのリソース実行制御 | APIなどのリソースへのアクセス制御 |
| 動作主体 | ブラウザ（クライアント側） | サーバー（レスポンスヘッダで制御） |
| 主な目的 | XSS等の攻撃からの防御 | 外部ドメインからの不正アクセス制御 |
| 制御対象 | スクリプト、スタイル、画像、iframeなどの読み込み・実行 | JavaScriptによるAPIアクセス（クロスオリジン通信） |
| 設定場所 |
Content-Security-Policy ヘッダ（またはHTMLの<meta>タグ） |
Access-Control-Allow-Origin などのHTTPレスポンスヘッダ |
| 典型例 |
script-src 'self'：自サイト以外からのJSを拒否 |
Access-Control-Allow-Origin: https://example.com：特定サイトからのAPIアクセスを許可 |
| 主な用途 | フロントエンドのリソース実行を信頼できる範囲に限定する | 外部フロントエンドによるAPI利用を制限する |
| ブラウザの動き | 許可されたリソース以外は実行自体をブロック | サーバーが許可しなければレスポンスを遮断 |
違いのポイント
-
CSP は「何を読み込んで良いか」を定義し、実行そのものを制御
→ XSS対策、スクリプト制限、外部iframe制限などに有効 -
CORS は「どこからの通信を許可するか」をサーバーが定義し、データの受け渡しを制御
→ APIの公開・制限、フロントエンドのセキュリティに必須
最後に
今回整理して、CSPに対する理解を少しは深めることができたと思う。