このブログにCSPを適用した

はい。今日も一日エアコンが臭い。 自分以外の人間がこのブログに任意の文字列を挿入することはできないし、できたとしても、さして脅威はないのだけれど、何となく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.