Zenn
🔍

【名探偵】あれれー？レスポンスヘッダーみてもCSP設定がないよー

に公開
csp
tech

CSP(Content Secutiry Policy)関連でエラーが出ていたので、設定を見直す機会がありました。設定箇所が見つからず迷子になったので、道案内を残しておきます。

CSP(Content Secutiry Policy)

サイト内で実行/表示できるコンテンツ(script/imageなど)のホワイトリスト。安全だと保証できるコンテンツのみを許可し、悪意のあるスクリプトなどの実行を防ぐための設定です。

  • 例:
    • self(サイトのドメイン)とcinnamon.comだけ実行を許可する
    Content-Security-Policy: default-src 'self' cinnamon.com

どこで設定できるの?？

レスポンスヘッダー

Content-Security-Policyに設定して返します。ブラウザのデベロッパーツール > ネットワーク確認できます。

メタタグ

<head>内の<meata>でも設定できます。
　 　<meta 　http-equiv="Content-Security-Policy" 　content="default-src 'self'; img-src https://*; child-src 'none';" /> 　

ブラウザのデベロッパーツール > sourceから確認できます。

当方、NuxtのSPAモードを利用していたので、<meta>に設定していたようです。

両方？？

レスポンスヘッダーとメタタグの両方を設定したら、どうなるのか？？ Content security policyはレスポンスヘッダの記述が優先されるらしいです。基本的にはヘッダーに設定した方が良さそうですね。

まとめ

  • CSPはレスポンスヘッダー/metaタグで設定できる
  • レスポンスヘッダーが優先

CSPとかセキュリティ系は毎回エラー出るたびに１から調べている気がします。

Discussion