2013年12月6日金曜日

弊社のホームページに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はある(下記)
ということで、外部から読み込んでいる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前提で使いやすい形に改善されることを期待します。

フォロワー