CSP(Content Security Policy)は、リソースの読み込みを制限する仕組み。
CSPはmetaタグや、HTTPのレスポンスで設定する。
目次
CSP: Content Security Policyとは？
jsやcss、画像などのリソースを読み込む際、意図しない外部のドメインからの読み込みをブロックする事ができる。
リソースの種類
CSPで読み込みの制御をできるリソースは下記の通り。
- base-uri (base要素に使用できるURLを制限)
- img-src (画像)
- script-src (jsなどのスクリプト)
- child-src (iframe)
- style-src (CSS)
- font-src (Webフォント)
- form-action (formのactionの送信先)
- object-src (flashなどのプラグイン)
- default-src (リソース特定の指定がない場合に適用されるデフォルトの設定)
なお、下記についてはdefault-srcの設定は適用されないため、全て許可している設定として扱われるようだ。
- base-uri
- form-action
キーワードの種類
参照元のURLの部分に、URLキーワードを使用する事ができる。
| キーワード | 意味 |
|---|---|
'none' |
何にも一致しない |
'self' |
現在のサイトと同じドメインのみ許可（サブドメインは除外）。 |
'unsafe-inline' |
インラインのJSとCSSを許可する。 |
'unsafe-eval' |
text-to-javascript の仕組みを許可する（evalなど）。 |
インラインのJSとCSS弾くと結構めんどいような気もする・・・
記述例
下記の通りディレクティブ毎にセミコロンで区切って記述する。
URLは半角スペース区切りで記述する。
directive1 url1 url2; directive2 url1 url2; directiveN url1 url2 ...
許可ドメインを記述
script-src https://a.example.com https://b.example.com
参考サイト
Googleの解説が詳しく書かれていたので一読すると良いかも。
