初めに #
現代のWebサイトは、見た目や機能だけでなく、「セキュリティの堅牢さ」が重要視されるようになっています。
特に、クロスサイトスクリプティング（XSS）などの脆弱性を狙った攻撃は、ユーザーの情報流出やWebサービスの信頼性低下に直結するリスクがあるため、十分な対策が必要となります。
そのような中で注目されているのが、Content Security Policy(コンテンツセキュリティポリシー)、「CSP」と呼ばれるセキュリティヘッダーです。
CSPは、Webブラウザに対して「どのソースからコンテンツを読み込んでよいか」を明示的に指示することで、意図しないスクリプトの実行や外部リソースの読み込みを防ぐことができます。
本記事では、「.htaccess」ファイルを活用してCSPを設定する方法を、初心者の方にもわかりやすく解説していきます。
CSPとは #
CSPは、Webアプリケーションにおけるセキュリティヘッダーのひとつで、主にクロスサイトスクリプティング（XSS）やクリックジャッキングなどの攻撃を防止するために使用されます。
Webページが読み込む外部リソース（JavaScript、CSS、画像、フォント）などの出所を明示的に制御することで、「信頼されたソース以外のスクリプトは実行させない」「意図しないコードの混入を防ぐ」といった対策が可能になります。
たとえば、次のようなことがCSPで実現できます。
- 自ドメイン以外のスクリプトの読み込みをブロック
- インラインスクリプトの実行を禁止
- 信頼したCDNだけを許可
- 特定の画像・フォント・iframeの読み込み元を限定
CSPの正しい導入により、不正なスクリプトの実行リスクを大幅に減らすことができ、Webサイトの信頼性と安全性が向上します。
近年では様々なWebセキュリティ評価ツールで、CSPの有無がサイトの評価に大きく影響するようになっています。
実際にCSPが未設定のサイトは、これらのツールで「重大なセキュリティ対策が欠如している」としてランクダウンされることも珍しくありません。
また、OWASPによる最新のセキュリティガイドラインにおいても、CSPは XSS対策の推奨手法として位置づけられております。
そのため、CSPは、「導入しておくと良い」対策ではなく、「導入するべき」対策になっていると言えます。
より詳しい情報については以下はmozillaにて公開されているドキュメントをご確認お願いいたします。
制御可能なリソース #
以下はCSPにてよく利用される代表的ななディレクティブは以下となります。
必要に応じてディレクティブを選択し設定する事が可能です。
| ディレクティブ名 | 説明 |
|---|---|
| default-src | すべてのリソースカテゴリに対するデフォルトポリシー |
| script-src | JavaScript の読み込み先を制御 |
| script-src-elem | <script> 要素からのスクリプト制御（より細かい制御） |
| script-src-attr | onclick などの HTML 属性中のスクリプト制御 |
| style-src | CSS の読み込み先を制御 |
| style-src-elem | <style> 要素などのスタイル制御 |
| style-src-attr | HTML 属性中のスタイル（例：style="..."）制御 |
| img-src | 画像ファイルの読み込み先を制御 |
| font-src | フォント（@font-face など）の読み込み先を制御 |
| connect-src | Ajax, WebSocket などの接続先を制御 |
| media-src | 音声・動画（<audio>, <video>）の読み込み先を制御 |
| object-src | <object>, <embed>, <applet> の読み込み先を制御 |
| frame-src | <iframe> など埋め込みコンテンツの読み込み先を制御 |
| frame-ancestors | このページがどのサイトに埋め込まれることを許可するか制御（クリックジャッキング対策） |
| manifest-src | Web App Manifest の取得先を制御 |
| worker-src | Web Workers、Service Workers のスクリプト取得元を制御 |
| base-uri | <base> タグの有効範囲を制御 |
| form-action | フォームの送信先 URL を制御 |
| upgrade-insecure-requests | HTTPリクエストを自動的にHTTPSへ変換（強制HTTPS） |
| report-to | 違反レポート送信の宛先を指定（Reporting APIで使用） |
各ディレクティブのより詳細な情報は以下の一覧より確認可能です。
一部非推奨となっているディレクティブやブラウザーによって対応していない場合がある為、設定には注意が必要となります。
リソースの制御例 #
例えばオリジン（自サイト）以外の「JavaScript」を禁止したい場合は以下のようになります。
script-src 'self';
オリジンも含め全ての「JavaScript」を禁止したい場合は以下のようになります。
script-src 'none';
反対に全ての「JavaScript」を許可する場合は以下のようになります。
script-src *;
特定のサイトからのみ「JavaScript」を許可する場合は以下のようになります。
script-src <サイトURL>;
また、応用としてハッシュ等による高度な制御も可能となっております。
確認方法 #
webサイトに設定されているコンテンツセキュリティポリシーを確認するには以下の方法があります。
今回は例として、私が運営・公開しているWebサービス「IPアドレス住所検索サービス」に対して、確認を実施します。
- コマンド(
curl)で確認 - ブラウザーの検証機能よりヘッダーを確認する
- 外部ツールを利用する
コマンドで確認 #
curlコマンドを利用しコンテンツセキュリティポリシーを確認するにはいかように実行します。
curl -I <サイトURL> 2>/dev/null | grep -i content-security
以下は実施例となります。
$ curl -I https://ip.r1999.com/ 2>/dev/null | grep -i content-security
content-security-policy: default-src 'none'; frame-ancestors 'self'; script-src 'self' ; script-src-elem 'self' data:; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self' https://ipinfo.io/ ; frame-src 'self' https://www.openstreetmap.org/; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;
何も表示されない場合は該当のセキュリティヘッダーがサーバー側で設定されていない状況となります。
外部ツールを利用する #
コマンドでの確認よりも比較的簡単に確認できる方法として外部ツールを利用する方法がございます。
今回はMozillaの公式ツール「Observatory」を利用した方法についてご紹介します。
利用方法は非常に簡単で以下のサイトにアクセスし確認対象となるURLを入力するだけとなります。
Mozilla Observatory以下は実施例となります。
1.サイトへアクセス #
2.URLを入力 #
上部にあるテキストエリアに対象となるURLを入力し「Scan」ボタンをクリック
3.結果を確認 #
解析が完了すると上記の画像の様に表示されます。
各セキュリティ情報に基づいて加点、または原点が行われ合計得点に応じて総合評価が表示されます。
以下はスコア表となります。
| 評価 | スコア基準 |
|---|---|
| A+ | 100+ |
| A | 90 |
| A− | 85 |
| B+ | 80 |
| B | 70 |
| B− | 65 |
| C+ | 60 |
| C | 50 |
| C− | 45 |
| D+ | 40 |
| D | 30 |
| D− | 25 |
| F | 0 |
今回解析を実施したwebサイトは非常に厳格なポリシーを適応している為、スコアが「130」点となり評価が「A+」となりました。
また「Benchmark comparison」項目では自身のwebサイトがどのレベルに属しているかを視覚敵に確認する事ができます。
4.CSPの詳細 #
CSPの設定状況を確認するには「CSP analysis」タブを確認してください。
設定に不備がある場合や脆弱となる場合などは赤色で推奨値を教えてくれます。
設定方法 #
ApacheにおけるCSPの設定方法には、次の2つのパターンがあります。
- Webサーバー全体への設定
.htaccessによるディレクトリやドメイン単位での設定
共用レンタルサーバーや、サイト単位でCSPを試験的に導入したい場合には、再起動不要で一般権限でも操作可能な.htaccessによる設定をお勧めいたします。
.htaccesでの設定 #
ApacheでCSPを有効にするには、mod_headersモジュールが利用可能である必要があります。
現在の多くの VPS（仮想専用サーバー）やレンタルサーバー環境では、該当のモジュールは標準で有効化されていることが一般的となっております。
.htaccesにてCSPを設定するには以下のように記述する必要があります。
<IfModule mod_headers.c>
Header set Content-Security-Policy "設定内容"
</IfModule>
たとえば、以下のように設定することで、自サイトのリソースのみを許可しつつ、JavaScriptの読み込み先として特定の外部ドメイン（例：CDNなど）を許可することができます。
このように基本的にはオリジンのリソースのみを許可し、必要に応じて外部リソースを追加することで、セキュリティと管理性を両立させることができます。
<IfModule mod_headers.c>
Header set Content-Security-Policy "default-src 'self'; script-src <サイトURL>;"
</IfModule>