弊社のホームページにContent Security Policy(CSP)を導入しました

弊社のホームページにCSP(Content Security Policy)を導入しました。CSPについては、はせがわようすけ氏のスライド「5分でわかるCSP」がわかりやすいと思います。以下にスライドの一部を引用します。

具体的には、以下のように指定して使います。

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

この結果、以下のようにJavaScriptの記述が制限されます。

外部のJavaScriptの読み込みは禁止
HTMLソースに記述した<script>...</script>のJavaScriptは禁止
イベント属性(onload="xxxx"など)は禁止

何も書けなくなるじゃないかと思われるかもしれませんが、JavaScriptは全て*.jsファイルに記述すればよい、ということです。
CSPは、JavaScriptのコードとデータを分離して、コードは静的な*.jsファイルに記述、可変のデータはHTML側に寄せて、「可変のリソースにはJavaScriptを記述できないように制限する」ことで、クロスサイト・スクリプティング(XSS)防御の切り札となることが期待されています。

CSP導入にあたり、弊社ホームページのJavaScriptの使用状況を調べました。その結果は以下の通りです。

JavaScriptは基本的に使っていない
外部から読み込むJavaScrpitはある（下記）

Google Analytics（アクセス解析）
Slideshare(プレゼンテーション資料)
YouTube(動画)
Vimeo（動画）

ということで、外部から読み込んでいるJavaScriptの取捨選択を行いました。その結果、

Google Analyticsは残すこととして、CSP上の許可設定をする
Slideshare、YouTube、Vimeoは許可しないこととし、これらを使うコンテンツはオフィシャルブログ（ここ）に転載する

ことにしました。この結果、CSPの設定は下記のように、Apacheの設定で行いしました。

Header Add Content-Security-Policy "default-src 'self' https://www.google-analytics.com"

しかし、これだけでは駄目です。Google Analyticsの設定は、以下のようなJavaScriptがHTMLインラインスクリプトで記述されています。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', 'hash-c.co.jp');
  ga('send', 'pageview');
</script>

これだとCSPのエラーになるので、上記スクリプトを/ga.jsというファイルに記述して、<script src="/ga.js"></script>により読み込むようにしました。これが正常に動作することは、Google Analyticsのリアルタイムレポートで確認しました。

上記を実施してテストしてみると、スタイルシートのところでエラーになりました。弊社ホームページのCSSは、大部分が/default.cssに記載されていますが、一部のCSSがインラインで記述されていました。これはスタイルの微調整のためです。インラインCSSを許可するようにしてもよいのでしょうが、せっかくなので、インラインスタイルシートを外部スタイルシートに移動し、ID属性で指定するようにしました。インラインスタイルシートはまだ一部残っていますが、画面が大きく乱れるものは対応したつもりで、残りはおいおい対応する予定です。

ということで、実施した内容は以下の通りです。

SlideShare等を使用しているコンテンツをオフィシャルブログに転載
Google Analyticsのスクリプトを/ga.jsに記載
Google Analyticsを設定したページを/ga.jsの読み込みに変更
インライン・スタイルシートを外部スタイルシートに変更

CSP対応の結果、副作用が生じました。Pocket（旧称: Read it later）のアドオン(Save to Pocket)の表示が乱れます。エラーメッセージを見ると、インラインスタイルが拒絶されているようです。コンテンツの保存はされていますが、見た目非常にまぎらわしい状況です。このような例は他にもあると予想されます。EvernoteのEvernote Web Clipperは問題なく使えました。

CSP対応の所感ですが、サイト独自のJavaScriptを使っていないサイトであるにも関わらず、CSP対応はかなり面倒な作業だという印象を受けました。やはり、インラインでJavaScriptやCSSが記述できないと「めんどうくさい」。しかし、インラインJavaScriptを許可してしまうとCSPのXSS防御機能は意味がなくなりますので、これは我慢するしかないでしょう。

中期的には、jQueryなどのJavaScriptライブラリや、Google AnalyticsやSlideShareなどから読み込むコンテンツが、CSP前提で使いやすい形に改善されることを期待します。

EGセキュアソリューションズオフィシャルブログ

2013年12月6日金曜日