オプティマイズのセキュリティ要件

コンテンツ セキュリティ ポリシー(CSP)を設定しているウェブサイトでオプティマイズを使用します。

ウェブサイトの HTTP ヘッダーまたは <META> タグでコンテンツ セキュリティ ポリシー(CSP)を設定している場合、Google オプティマイズを使用するには、Google オプティマイズ ドメインと Google アナリティクス ドメインを指定する必要があります。

サーバーから配信されるすべてのコンテンツを無条件に信頼するのではなく、CSP に則したコンテンツ セキュリティ ポリシー HTTP ヘッダーを定義すると、信頼できるコンテンツ提供元のアクセス制御リストを作成して、ブラウザにこれらの提供元からのリソースのみを実行または表示するように指示できます。

- Google Developers

コンテンツ セキュリティ ポリシー(CSP)に関するエラーのトラブルシューティング

以下の場合、オプティマイズを使用するように CSP を変更する必要があります。

a) ブラウザに以下のエラーが表示される

このページでは、オプティマイズ エディタに対応していないセキュリティ機能が使われています。

b) Google デベロッパー ツールに以下のエラーが表示される

次のコンテンツ セキュリティ ポリシーのディレクティブに違反しているため、optimize.google.com は実行されませんでした。

c) 次のようなエラーが表示される

サイトのコンテンツ セキュリティ ポリシーにより、「eval」が JavaScript で使用されないようブロックされています。

CSP の変更

コンテンツ セキュリティ ポリシー(CSP)を設定したオプティマイズ エクスペリエンス(テストやパーソナライズ)を実施またはプレビューするには、CSP に次のディレクティブを含める必要があります。

script-src https://www.googleanalytics.com https://www.google-analytics.com https://www.googleoptimize.com 'unsafe-inline';
style-src 'unsafe-inline'; 
img-src https://www.google-analytics.com https://www.googletagmanager.com

 

オプティマイズのビジュアル エディタを使用するには、CSP に次のディレクティブを含める必要があります。

script-src https://optimize.google.com 'unsafe-inline';
style-src https://optimize.google.com https://fonts.googleapis.com 'unsafe-inline';
img-src https://optimize.google.com;
font-src https://fonts.gstatic.com;
frame-src https://optimize.google.com

 

ウェブサイトですでに CSP を設定している場合は、既存のディレクティブに上記のディレクティブを追加してください。

オプティマイズとページフレーム処理の制限

次のようなエラー メッセージが表示される場合があります。

このページでは、オプティマイズのモバイル編集機能との互換性がないセキュリティ機能が使用されています。

このとき、以下のような現象が発生している可能性があります。

オプティマイズ エディタのデスクトップ ビューには、フレームのセキュリティに関するディレクティブやページ技術に関連してフレーム処理(フレーム バスティング)を禁止する制限はありませんが、オプティマイズのビジュアル エディタで「モバイル」表示オプションを使用する場合は、自分のサイトでページがフレーム処理されることを許可する必要があります。

deny の値を含む X-Frame-Options レスポンス ヘッダーのディレクティブをサイトで使用している場合、モバイル編集機能は使用できません。

多くのウェブサイトで使用可能な回避策(ユーザーが作成したコンテンツを含まないサイトや、信頼できないページで共有されていないドメインなど)は、X-Frame-Options: sameorigin への制約を緩和するためのものです。

X-Frame-Options: sameorigin では、ページをご自身のウェブサイトでフレーム処理することはできますが、他のウェブサイトでフレーム処理することはできません。

詳しくは、MDW ウェブ ドキュメントで X-Frame-Options に関する説明をご確認ください。

スタイル変更や CSS コードのダイアログでメディアクエリを使って、オプティマイズのビジュアル エディタ(デスクトップ上)でモバイル ユーザー向けに変更を加え、プレビュー モードでモバイル機能をプレビューすることもできます。

フレーム処理に関するエラーのトラブルシューティング

現在ウェブサイトで設定しているコンテンツ セキュリティ ポリシーを確認するには、Google デベロッパー ツールを使用します。コンソールで次のようなエラーが見つかった場合は、オプティマイズを使用するように CSP を変更する必要があります。

「X-Frame-Options」が「deny」に設定されているため、フレーム内に表示できませんでした。
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。
検索
検索をクリア
検索を終了
Google アプリ
メインメニュー
ヘルプセンターを検索
true
101337
false