はい。今日も一日エアコンが臭い。
自分以外の人間がこのブログに任意の文字列を挿入することはできないし、できたとしても、さして脅威はないのだけれど、何となくCSP(Conent-Security-Policy)を適用した。
CSPの適用
とりあえずシュッとできる <meta> に設定した。
手順としては default-src 'self' から始めて、何が読み込めていないかDevToolsと睨めっこしながら追加していく。
このブログではiframeでSpeakerDeckのスライドを埋め込んでいたり、はてブやTwitterのボタンを設置していたので、それらをポチポチ追加していった。
(サクッとHTML内でどのドメインを読み込んでいるか出してくれるやつ書けばよかった感)
最終的には以下のような形に。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://gist.github.com http://cdnjs.cloudflare.com https://www.googletagmanager.com https://www.google-analytics.com 'unsafe-inline' http://speakerdeck.com https://platform.twitter.com https://cdn.syndication.twimg.com https://b.st-hatena.com https://cdn.api.b.hatena.ne.jp; child-src 'self' http://speakerdeck.com https://platform.twitter.com https://syndication.twitter.com http://cdn.api.b.hatena.ne.jp/ http://b.hatena.ne.jp/ http://cdn.api.b.hatena.ne.jp/; img-src 'self' data: https://pbs.twimg.com https://platform.twitter.com https://syndication.twitter.com http://cdn-ak.b.st-hatena.com https://b.st-hatena.com https://www.google-analytics.com; style-src 'self' https://assets-cdn.github.com http://maxcdn.bootstrapcdn.com http://cdnjs.cloudflare.com 'unsafe-inline' https://platform.twitter.com; font-src 'self' http://maxcdn.bootstrapcdn.com;">
report-uri
CSPの違反レポートは Report URI を使ってみている。
生成されたURLを report-uri にペロッとするだけで終わり。便利。
と思ったら、<meta> での report-uri はサポートされていないらしい。ガーン…
というわけで heroku-buildpack-static を使って、static.json にCSPの設定を書いて、ヘッダーに吐き出してくれるようにすることで解決。
試しに今回は許可していない youtube.com の iframe での埋め込みはどのような感じで収集されるかを確認。
なかなかいい感じ。お疲れ様でした。
ブログに設定するだけで↑のような長い設定を行うことになった。
TwitterやGmailなどのCSPを見ると更に膨大で気が滅入る。
膨大なポリシーの設定は負荷でしかなくて、実際、インターネット上のサイトのほとんどのポリシーはスクリプトの実行防止の効果はなく、XSSの危険はなくなっていないとされる Googleの調査 もある。
そこで、CSP Level2 で提案された nonce と hash を使ったり、CSP Level3 で提案されている strict-dynamic でもっと気軽にCSPの恩恵を得られるようになる…はず。