CSP(Content Security Policy)について調べてみました

今日は仕事で以下のようなエラーメッセージに出くわしたので、CSP(Content Security Policy)について調べたことを書いてみます。

Refused to execute inline script because it violates the following Content Security Policy directive

何をする？
どんな目的で作られた？
どこで設定されている？
CSP Evaluator
備考
気になった点
参考

何をする？

インラインスクリプト(GTMなどであとからjsを追加したようなスクリプトですね)やevalメソッドの実行を禁止したり、読み込めるソースを制限したりします。

script-src ‘https://yahoo.co.jp’という記載があったら、yahooドメインのスクリプトは利用できますよ。(他は制限しますよ)ということです。

上記の「script-src」部分に関しては、色々なディレクティブが用意されているので、script-srcはスクリプト(js)の実行にかんするディレクティブ、という事ですね。

他にはstyle-src, img-srcなどcssや画像の設定など、色々できるようです。

どんな目的で作られた？

クロスサイトスクリプティングやデータインジェクション攻撃といったセキュリティの脆弱性をついた攻撃を防ぐために作られた機能です。

どこで設定されている？

webサービスにアクセスしたときのHTTPレスポンスのヘッダかhtmlのmetaタグに含まれています。

Apacheで設定するんだと、httpd.confや.htaccessで設定するようですね。(mod_headersモジュールが必要。)

ここではHTTPレスポンスヘッダーを見てみましょう。

こんな感じで返ってくるHTTPリクエストを送った時のレスポンスのヘッダですね。(そのままですが・・・)

200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY

curlコマンドのIオプションはヘッダーのみを出力してくれるので、twitterのレスポンスヘッダを見てみましょう。

curl -I https://twitter.com

こんな感じで、色んなドメインが設定されています。(たくさんあったので、省略してます。)

content-security-policy: connect-src 'self' blob: https://*.giphy.com https://*.pscp.tv https://*.video.pscp.tv https://*.twimg.com https://api.twitter.com https://api-stream.twitter.com https://ads-api.twitter.com https://aa.twitter.com https://caps.twitter.com https://media.riffsy.com https://pay.twitter.com