厳格なCSP = CSP Level 3
許可リストのCSP = CSP Level 2
Google タグマネージャー
GA4 シグナル
Google シグナルを使用している Google アナリティクス 4(Google アナリティクス)デプロイメントにおいては、CSP に次のディレクティブを含める必要があります。
script-src: https://*.googletagmanager.com img-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD> connect-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>注: CSP の構文では、ホスト名の右側でワイルドカードを使用できないため、Google の各トップレベル ドメイン(TLD)は個別に指定する必要があります。サポートされている Google の TLD の一覧は、https://www.google.com/supported_domains でご確認いただけます。
https://developers.google.com/tag-platform/security/guides/csp?hl=ja
しかしこの2つをディレクティブに含めて動作確認をすると以下のCSP違反のエラーが出ます。
https://td.doubleclick.net/ が frame-src で違反
https://www.google.co.jp/pagead/1p-co… が img-src で違反
script-src: https://www.google.co.jp img-src: https://www.google.co.jp frame-src: https://td.doubleclick.net
<meta http-equiv="Content-Security-Policy" content=" default-src 'self' https://www.google-analytics.com; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/; style-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://www.google-analytics.com https://tagmanager.google.com/ https://www.googletagmanager.com/ https://fonts.googleapis.com/; img-src 'self' 'unsafe-inline' https://www.google-analytics.com https://ssl.gstatic.com/ data:; font-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://fonts.gstatic.com/ data:; " />https://hershkoy.medium.com/resolving-google-analytics-4-content-security-policy-issues-9a01e18952d2 2023
img-src: data: も必要?ブロックされたレポートがあった
violated-directive: connect-src blocked-uri: https://adservice.google.com
tl;dr; If you're running into issues with connect-src adservice.google.com, add connect-src www.googleadservices.com to your policy.
...
Conclusion
If you're running into issues with connect-src adservice.google.com, make sure to include the redirected source 'www.googleadservices.com'.
とても参考になる
reCAPTCHA
ウェブサイトでコンテンツ セキュリティ ポリシー(CSP)を使用しています。reCAPTCHA と連携するように設定するにはどうすればよいですか?
CSP3 に記載されているノンスベースのアプローチを使用することをおすすめします。 reCAPTCHA の api.js スクリプトタグにノンスを含めると、残りは Google によって処理されます。
注: reCAPTCHA は、対応ブラウザでは 'strict-dynamic' でも動作します。
または、以下の値をディレクティブに追加してください。script-src https://www.google.com/recaptcha/、https://www.gstatic.com/recaptcha/ frame-src https://www.google.com/recaptcha/、https://recaptcha.google.com/recaptcha/
https://melapress.com/support/kb/configuring-content-security-policy-csp-captcha/
Google マップ
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:; img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:; frame-src *.google.com; connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:; font-src https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; worker-src blob:;https://developers.google.com/maps/documentation/javascript/content-security-policy?hl=ja
youtube embed
Required policies: frame-src: www.youtube-nocookie.com img-src: i.ytimg.com frame-src is used to embed the actual video and the img-src is used for images that are loaded when the video is paused displaying other recommended videos.