プリセット

プリセットは、サービスが Content Security Policy で必要とするソースを持つ、プラグインのクラス (PieceOfCake2\SecurityHeaders\ContentSecurityPolicy) です。ページで使うものを contentSecurityPolicyAllow に並べます (ほかのサイトを許可するを参照してください)。

php

use PieceOfCake2\SecurityHeaders\ContentSecurityPolicy\GoogleTagManager;
use PieceOfCake2\SecurityHeaders\ContentSecurityPolicy\YouTube;

Configure::write('SecurityHeaders', [
    'contentSecurityPolicyAllow' => [GoogleTagManager::class, YouTube::class],
]);

ソースは、サービスがガイドを公開している場合はそのガイドから、そうでない場合は埋め込みコードや基本コードから作り、ポリシーを有効にした Chrome で開いて確かめています。
毎週確認: この印のあるプリセットは、毎週とリリースのたびに、実際のサービスに対してポリシーを有効にした Chrome で開いています。ブラウザーが違反を報告すると失敗します。ほかのプリセットは、動かすのにサービスのアカウントが必要です。
同じサービスでも、埋め込みとコンバージョンタグは別のプリセットです (ページプラグインは Facebook、広告のコンバージョンは MetaPixel など)。ページで使うものだけを並べてください。
スクリプトは、Google のガイドの script-src-elem ではなく script-src に追加します。Safari 15.4 より前など、 script-src-elem に対応していないブラウザーでも許可されるようにするためです。
サービスはホストを変えることがあります。プリセットにないホストがブラウザーのコンソールに報告されたら、名前を付けて contentSecurityPolicyAllow に追加し、issue で知らせてください。
タグマネージャーとアクセス解析: GoogleTagManager, GoogleTagManagerPreview, GoogleAnalytics, GoogleAnalyticsWithAds, AdobeTags, AdobeAnalytics, AdobeWebSdk
広告のコンバージョン (CV) タグ: GoogleAds, Floodlight, MerchantCenter, MetaPixel, TikTokPixel, XPixel, LineTag, YahooJapanAds, MicrosoftAds
埋め込み: GoogleMaps, GoogleMapsEmbed, YouTube, Facebook, Instagram, X, TikTok, Line

タグマネージャーとアクセス解析

`GoogleTagManager`

Google タグマネージャーのコンテナ。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com`
`img-src`	`https://www.googletagmanager.com`
`connect-src`	`https://www.googletagmanager.com` `https://www.google.com`

Google のガイドと同じく、読み込むスクリプトにも nonce を渡すスニペットです。

php

<!-- レイアウトの <head> の中 -->
<script nonce="<?= h($this->SecurityHeaders->nonce()) ?>">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

カスタム JavaScript 変数には script-src に 'unsafe-eval' が必要です。できればカスタムテンプレートを使ってください。 Tag Assistant の「ページの問題」に、ポリシーがブロックしたリソースが表示されます。

`GoogleTagManagerPreview`

Google タグマネージャーのプレビューモード。

根拠: Google のガイド。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com` `https://tagmanager.google.com`
`style-src`	`https://www.googletagmanager.com` `https://tagmanager.google.com` `https://fonts.googleapis.com`
`img-src`	`https://www.googletagmanager.com` `https://ssl.gstatic.com` `https://www.gstatic.com`
`font-src`	`https://fonts.gstatic.com` `data:`

`GoogleAnalytics`

Google アナリティクス (Google 広告の機能なし)。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com`
`img-src`	`https://www.googletagmanager.com` `https://*.google-analytics.com`
`connect-src`	`https://www.googletagmanager.com` `https://.google-analytics.com` `https://.google.com`

タグマネージャーを使わない場合、gtag.js のスニペットにインラインのスクリプトがあります: <script nonce="<?= h($this->SecurityHeaders->nonce()) ?>">。

`GoogleAnalyticsWithAds`

Google アナリティクス (Google シグナルやリマーケティングなど、Google 広告の機能あり)。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com`
`img-src`	`https://www.googletagmanager.com` `https://.google-analytics.com` `https://.google.com` `https://*.g.doubleclick.net`
`connect-src`	`https://www.googletagmanager.com` `https://.google-analytics.com` `https://.google.com` `https://*.g.doubleclick.net` `https://pagead2.googlesyndication.com`
`frame-src`	`https://www.googletagmanager.com`

利用者の国のドメインを追加してください (例: img-src と connect-src に https://*.google.co.jp)。ポリシーではホストの末尾にワイルドカードを使えません。

`AdobeTags`

Adobe のホストにある Adobe Experience Platform Tags (旧 Adobe Launch) のライブラリ。

根拠: Adobe のガイド。

ディレクティブ	ソース
`script-src`	`https://assets.adobedtm.com`

ライブラリは非同期で読み込んでください。拡張機能のクラス (AdobeAnalytics など) と、カスタムコードのための nonce (Core 拡張機能に nonce のデータ要素を設定) も追加してください。

`AdobeAnalytics`

Adobe Analytics (AppMeasurement) と Experience Cloud ID サービス。

根拠: Adobe のガイド。

ディレクティブ	ソース
`script-src`	`https://*.demdex.net` `https://cm.everesttech.net` `https://assets.adobedtm.com`
`img-src`	`https://.omtrdc.net` `https://.2o7.net` `https://*.demdex.net` `https://cm.everesttech.net` `https://assets.adobedtm.com`
`connect-src`	`https://.omtrdc.net` `https://.2o7.net` `https://*.demdex.net` `https://cm.everesttech.net` `https://assets.adobedtm.com`
`frame-src`	`https://*.demdex.net`

自分のドメイン (CNAME) のトラッキングサーバーは追加してください。

`AdobeWebSdk`

Adobe Experience Platform の Web SDK。*.demdex.net は訪問者の移行 (idMigrationEnabled) のためです。

根拠: Adobe のガイド。

ディレクティブ	ソース
`connect-src`	`https://.adobedc.net` `https://.demdex.net`

edgeDomain が自分のドメイン (CNAME) の場合は追加してください。

広告のコンバージョン (CV) タグ

`GoogleAds`

Google 広告のコンバージョン、リマーケティング、コンバージョンリンカー、ユーザー提供データ。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com` `https://www.googleadservices.com` `https://www.google.com`
`img-src`	`https://www.googletagmanager.com` `https://www.googleadservices.com` `https://googleads.g.doubleclick.net` `https://pagead2.googlesyndication.com` `https://www.google.com`
`connect-src`	`https://www.googletagmanager.com` `https://www.googleadservices.com` `https://googleads.g.doubleclick.net` `https://pagead2.googlesyndication.com` `https://www.google.com` `https://ad.doubleclick.net`
`frame-src`	`https://www.googletagmanager.com`

利用者の国のドメインを追加してください (例: img-src と connect-src に https://www.google.co.jp)。

`Floodlight`

Floodlight (カスタムスクリプトを含む)。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。

ディレクティブ	ソース
`img-src`	`https://www.googletagmanager.com` `https://ad.doubleclick.net` `https://ade.googlesyndication.com` `https://adservice.google.com`
`connect-src`	`https://pagead2.googlesyndication.com` `https://www.google.com` `https://www.googleadservices.com` `https://ad.doubleclick.net`
`frame-src`	`https://www.googletagmanager.com` `https://*.fls.doubleclick.net`

`MerchantCenter`

Google Merchant Center。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Google のガイド。

ディレクティブ	ソース
`script-src`	`https://www.googletagmanager.com`
`img-src`	`https://*.merchant-center-analytics.goog`
`connect-src`	`https://*.merchant-center-analytics.goog`

`MetaPixel`

Meta ピクセル (Facebook ピクセル)。Facebook と Instagram の広告。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Meta の基本コード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://connect.facebook.net`
`img-src`	`https://www.facebook.com`
`connect-src`	`https://www.facebook.com`
`frame-src`	`https://www.facebook.com`
`form-action`	`https://www.facebook.com`

大きいイベントは、隠したフレームの中のフォームで https://www.facebook.com/tr/ に送るため、frame-src と form-action も許可します。

`TikTokPixel`

TikTok ピクセル。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: TikTok の基本コード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://analytics.tiktok.com`
`img-src`	`https://analytics.tiktok.com`
`connect-src`	`https://analytics.tiktok.com` `https://analytics-ipv6.tiktokw.us`

`XPixel`

X 広告の X ピクセル (旧 Twitter ピクセル)。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: X の基本コード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://static.ads-twitter.com`
`img-src`	`https://analytics.twitter.com` `https://t.co`
`connect-src`	`https://analytics.twitter.com` `https://t.co`

`LineTag`

LINE 広告の LINE Tag。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: LINE の基本コード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://d.line-scdn.net` `https://tag.flvcdn.net`
`img-src`	`https://tr.line.me`
`connect-src`	`https://tr.line.me`

`YahooJapanAds`

Yahoo!広告 (検索広告とディスプレイ広告) のコンバージョン測定タグとサイトリターゲティングタグ、サイトジェネラルタグ (ytag.js)。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Yahoo!広告のお知らせとタグ。毎週確認。

ディレクティブ	ソース
`script-src`	`https://s.yimg.jp` `https://b91.yahoo.co.jp` `https://b97.yahoo.co.jp` `https://b98.yahoo.co.jp` `https://b99.yahoo.co.jp`
`img-src`	`https://b91.yahoo.co.jp` `https://b97.yahoo.co.jp` `https://b98.yahoo.co.jp` `https://b99.yahoo.co.jp` `https://apm.yahoo.co.jp`
`connect-src`	`https://b91.yahoo.co.jp` `https://b97.yahoo.co.jp` `https://b98.yahoo.co.jp` `https://b99.yahoo.co.jp` `https://apm.yahoo.co.jp` `https://dm.slim02.jp`

検索広告のタグは b9x.yahoo.co.jp からスクリプトを読み込み、そこに送信します。ディスプレイ広告のタグは apm.yahoo.co.jp に、サイトジェネラルタグは一部を dm.slim02.jp に送信します。

`MicrosoftAds`

Microsoft 広告の UET タグ。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Microsoft の基本コード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://bat.bing.com`
`img-src`	`https://bat.bing.com` `https://bat.bing.net`
`connect-src`	`https://bat.bing.com` `https://bat.bing.net`

埋め込み

`GoogleMaps`

Google マップの Maps JavaScript API。nonce をオンにします。コードにインラインのスクリプトがあります。インラインのスクリプトと nonce を参照してください。

根拠: Maps JavaScript API のガイド (許可リストのポリシー)。毎週確認。

ディレクティブ	ソース
`script-src`	`'unsafe-eval'` `https://.googleapis.com` `https://.gstatic.com` `https://.google.com` `https://.ggpht.com` `https://*.googleusercontent.com` `blob:`
`img-src`	`https://.googleapis.com` `https://.gstatic.com` `https://.google.com` `https://.googleusercontent.com` `data:`
`frame-src`	`https://*.google.com`
`connect-src`	`https://.googleapis.com` `https://.google.com` `https://*.gstatic.com` `data:` `blob:`
`font-src`	`https://fonts.gstatic.com`
`style-src`	`'unsafe-inline'` `https://fonts.googleapis.com`
`worker-src`	`blob:`

ガイドと同じく、script-src に 'unsafe-eval'、style-src に 'unsafe-inline' を追加します。ガイドの script-src の 'unsafe-inline' は入れていません。コールバックなどのインラインのスクリプトには nonce が必要です。国のドメイン (maps.google.fr など) から API を読み込む場合は追加してください。

`GoogleMapsEmbed`

iframe で埋め込んだ Google マップ (Maps Embed API、または「共有」>「地図を埋め込む」)。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`frame-src`	`https://www.google.com`

`YouTube`

YouTube の埋め込みプレーヤー (www.youtube.com と、プライバシー強化モードの www.youtube-nocookie.com)、IFrame Player API、i.ytimg.com のサムネイル。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.youtube.com`
`img-src`	`https://i.ytimg.com`
`frame-src`	`https://www.youtube.com` `https://www.youtube-nocookie.com`

`Facebook`

Facebook の JavaScript SDK とソーシャルプラグイン (ページプラグイン、埋め込み投稿、いいね！ボタン、コメント)。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://connect.facebook.net`
`frame-src`	`https://www.facebook.com`
`style-src`	`'unsafe-inline'`

SDK が <style> 要素を追加するため、style-src に 'unsafe-inline' を追加します。プラグインはヘッドレスの Chrome では描画されないため、確認は SDK だけです。

`Instagram`

Instagram の埋め込み投稿。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.instagram.com`
`frame-src`	`https://www.instagram.com`
`style-src`	`'unsafe-inline'`

埋め込みコードに style 属性があるため、style-src に 'unsafe-inline' を追加します。投稿はヘッドレスの Chrome では描画されないため、確認はスクリプトだけです。

`X`

X (旧 Twitter) の埋め込みポスト、タイムライン、ボタン。syndication.twitter.com はタイムラインのためです。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://platform.twitter.com`
`frame-src`	`https://platform.twitter.com` `https://syndication.twitter.com`
`style-src`	`'unsafe-inline'`

スクリプトが <style> 要素を追加するため、style-src に 'unsafe-inline' を追加します。ポストはヘッドレスの Chrome では描画されないため、確認はスクリプトだけです。

`TikTok`

TikTok の埋め込み動画とプロフィール。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.tiktok.com` `https://.ttwstatic.com` `https://.tiktokcdn-us.com`
`style-src`	`'unsafe-inline'` `https://.ttwstatic.com` `https://.tiktokcdn-us.com`
`frame-src`	`https://www.tiktok.com`
`connect-src`	`https://www.tiktok.com`
`img-src`	`data:`

ファイルは日本では *.ttwstatic.com、米国では *.tiktokcdn-us.com から配信されます。TikTok は利用者の国で CDN を選びます。埋め込みコードに style 属性があるため、style-src に 'unsafe-inline' を追加します。

`Line`

LINE のソーシャルプラグイン (「LINEで送る」ボタン、「友だち追加」ボタン)。

根拠: 埋め込みコード。毎週確認。

ディレクティブ	ソース
`script-src`	`https://www.line-website.com`
`frame-src`	`https://social-plugins.line.me`
`style-src`	`'unsafe-inline'`

埋め込みコードに style 属性があり、スクリプトがスタイルを設定するため、style-src に 'unsafe-inline' を追加します。

プリセット ​

タグマネージャーとアクセス解析 ​

GoogleTagManager ​

GoogleTagManagerPreview ​

GoogleAnalytics ​

GoogleAnalyticsWithAds ​

AdobeTags ​

AdobeAnalytics ​

AdobeWebSdk ​

広告のコンバージョン (CV) タグ ​

GoogleAds ​

Floodlight ​

MerchantCenter ​

MetaPixel ​

TikTokPixel ​

XPixel ​

LineTag ​

YahooJapanAds ​

MicrosoftAds ​

埋め込み ​

GoogleMaps ​

GoogleMapsEmbed ​

YouTube ​

Facebook ​

Instagram ​

X ​

TikTok ​

Line ​

プリセット

タグマネージャーとアクセス解析

`GoogleTagManager`

`GoogleTagManagerPreview`

`GoogleAnalytics`

`GoogleAnalyticsWithAds`

`AdobeTags`

`AdobeAnalytics`

`AdobeWebSdk`

広告のコンバージョン (CV) タグ

`GoogleAds`

`Floodlight`

`MerchantCenter`

`MetaPixel`

`TikTokPixel`

`XPixel`

`LineTag`

`YahooJapanAds`

`MicrosoftAds`

埋め込み

`GoogleMaps`

`GoogleMapsEmbed`

`YouTube`

`Facebook`

`Instagram`

`X`

`TikTok`

`Line`