ApacheでContent Security Policy(CSP)を設定する

先日、脆弱性検査ツールで以下のレポートが出力されました。

Content-Security-Policyの欠落

対策したときに最初よくわからず時間がかかったので、まとめます。

CSPの概要

ブラウザに対してサーバのポリシーを表明するための仕組みです。セキュリティ対策を目的としており、スクリプトや画像の実行可能範囲をしていすることができます。
たとえば、動作しているアプリケーションに脆弱性があり、XSSの外部スクリプトを目的としたスクリプトコードが埋め込まれた際に、実行を抑制することができます。

各ブラウザのサポート情報は、以下のサイトで確認することができます。
Content Security Policy (CSP) Quick Reference Guide

また、以下のサイトでブラウザの対応状況テストを実施することができます。
Content Security Policy Browser Test

設定方法

Apacheの設定ファイルに、

Header set Content-Security-Policy “設定”

を記載します

例：すべてのソースは同じドメイン(same origin)からのみ呼び出しが可能とし、外部スクリプトとしてアナリティクスの呼び出しを許可する。

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' www.google-analytics.com"
    AllowOverride All
    Options FollowSymLinks
</Directory>

キーワードはシングルクォーテーションで囲む必要がありますが、ドメイン指定の場合はシングルクォーテーションで囲まない。また、ドメイン指定にはワイルドカードとしてアスタリスク(*)が利用可能。

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' *.google-analytics.com"
    AllowOverride All
    Options FollowSymLinks
</Directory>

data:タグによる画像呼び出しと、ソースコード内のスクリプト実行を許可(unsafe-inline)する

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:;"
    AllowOverride All
    Options FollowSymLinks
</Directory>

すべてのソースからの画像ファイル表示を許可するために、アスタリスクを記述。（ただし、この場合data:は読み込めない※ブラウザ依存？）

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "img-src *;"
    AllowOverride All
    Options FollowSymLinks
</Directory>

JSのevalを許可

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"
    AllowOverride All
    Options FollowSymLinks
</Directory>

プロトコルで制御

<Directory "/var/www/laravel-sample/public">
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://*.google.com"
    AllowOverride All
    Options FollowSymLinks
</Directory>

設定→DeveloperToolで呼び出しエラーの確認→設定
を繰り返し、最適な設定を確認しましょう。また、ブラウザごとにサポート範囲が違うので、設定後は複数のブラウザで確認しましょう。