PSI Labs RSS feed

Content Security Policy (CSP) を試す

こんにちは、tomita です。

さて、Content Security Policy (CSP) とはなんぞやってことですが、とりあえず MDN から引用します。

https://developer.mozilla.org/ja/docs/Security/CSP

Content Security Policy (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃を含む、よく知られた種類の攻撃を検出して軽減する、セキュリティの追加レイヤーです。

XSS等の攻撃を軽減してくれる便利な仕組みってわけです。ということでさっそく試してみます。

Content-Security-Policy ヘッダを出力

ブラウザごとに若干記述が異なりますが、サーバ側で「Content-Security-Policy」ヘッダを出力すれば終わりです。

PHP に書く場合は以下のようになります。

<?php
header( "X-Content-Security-Policy: default-src 'self'" ); // Firefox
header( "X-WebKit-CSP: default-src 'self'" ); // Chrome, Safari
header( "Content-Security-Policy: default-src 'self'" ); // W3C

.htaccess に書く場合は以下のようになります。

Header set X-Content-Security-Policy "default-src 'self'"
Header set X-WebKit-CSP "default-src 'self'"
Header set Content-Security-Policy "default-src 'self'"

これでCSPヘッダが出力され、インラインjavascript や iframeなどが無効になります。

※上記は最小限の記述です。もっと細かくポリシーを記述できるのですがとりあえずはこれで。

サンプル

実際にサンプルを作ってみました。以下からアクセス可能です。

CSP動作サンプル

以下、Chromeでアクセスした場合の画面キャプチャです。

CSPがOFFの場合↓

csp ONの画像

CSPがONの場合↓

csp OFFの画像

CSPをONにすると、インラインjavascript, インラインcss, iframe が無効になっていることがわかります。

何が嬉しいか

セキュリティ面はもちろん、インラインjs/css が無効になることでソース(HTML/javascript/css)の分離を強制できるのも良いと思っています。

ソースの分離により保守性も可読性もあがり、行き当たりばったりの「onclick="onClickFunc()"」「style="color:red;"」みたいな修正はできなくなるので、品質管理に役立ちそうですよね。

既存のプロダクトの場合はなかなか難しいですが、新規開発の場合はCSPヘッダを有効にしておくのもいいかと思います。

CSP、現時点ではFirefox, Safari, Chrome でしか有効ではないですが、IEやOperaでも近々使えるようになりそうです。全てのブラウザで使えるようになるといいですね。

それでは~