Content Security Policy


HTTPヘッダにContent Security Policy(CSP)を組み込むことで次のことができます。

  • CSPでコンテンツの提供元のドメインや取得方法(HTTPSなど)を制限できます
  • XSSやデータインジェクションなどの攻撃を検出できます
  • レポートモードを使って、Mixed Contentの早期発見できます

🗽 利用例

特定のURLからだけスクリプトを取得

次のHTTPヘッダを設定すると、自分自身とapis.google.com以外からのスクリプトの読み込みでエラーを返します。

Content-Security-Policy: script-src 'self' https://apis.google.com
  • Content-Security-Policy:読み込みを制限します
  • script-src self xxx:自身のドメインとxxxのみスクリプトを読み込みます

Mixed Contentがあれば通知

Mixed Contentがあった場合にレポートのみを行う場合は次のようにHTTPヘッダに記述します。

Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://example.com/csp-report
  • Content-Security-Policy-Report-Only:レポートのみを実施(読み込みは行う)
  • block-all-mixed-content: Mixed Contentを検出する
  • report-uri https://xxx: 指定したURLにレポートのJSONを送る

送られるレポートはJSON形式ですので、ElasticSearchなどを使って簡単に分析できます。

🤔 オプション

CSPでは幅広いリソースに対してポリシーを設定できます。

リソースディレクティブ 説明
content-src XHR、WebSocketsを経由して接続できるオリジンを制限できます
default-src 末尾が-srcのディレクティブのデフォルトを設定
img-src 画像を読み込み可能なオリジンを定義します
media-src 動画と音声を配信できるオリジンを制限できます
report-uri CSPの違反があったときにレポートを送信するURLを指定できます
script-src スクリプトを取得先のホワイトリストを設定できます
style-src スタイルシートの取得先のホワイトリストを設定できます
upgrade-insecure-requests UAに指示してHTTPをHTTPSに変更(古いURLが複数ある際に利用)

設定しない場合はすべて許可したのと同じ動作をします。

😀 ディレクティブの値

  • 複数の値を設定する場合は値と値の間にスペースを入れる
  • none:何も一致しない
  • self:現在のオリジンと一致します。サブドメインは除外されます
  • unsafe-inline:インラインJSおよびCSSを許可します

🐝 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍