web-dev-qa-db-ja.com

Googleanalytics.jsとコンテンツセキュリティポリシー

デフォルトのhtml5boilerplateコンテンツセキュリティポリシーを使用するWebアプリがあります。

ただし、ページに新しいGoogle analytics.jsスニペットがあり、CSPによってブロックされています。

私はGoogleanalytics.jsを許可するCSPとJSのインクルード構造の例を見つけようとしていますが、うまくいきませんでした。

最も近いSO投稿は Google AnalyticsおよびContent-Security-Policyヘッダー ですが、これは古いga.jsを使用しています。

残念ながら Google Docs CSPについては言及していません。

しかし、私は次の解決策に到達しました：

私のhtmlファイルの下部：

<script type="text/javascript" src="/js/analytics.js"></script>

Analytics.jsのコンテンツ：

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()
{ (i[r].q=i[r].q||[]).Push(arguments)}
,i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;        m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-1', 'auto');
ga('send', 'pageview');

.htaccess CSP：

Header set Content-Security-Policy "script-src 'self' https://ssl.google-analytics.com http://www.google-analytics.com; object-src 'self'"

これは機能しますが、GAコードの非同期性を壊したのか、それとも他の意図しない結果を引き起こしたのかはわかりません。

誰かがコンテンツセキュリティポリシーを通じてGoogleanalytics.jsを許可する正しい方法をアドバイスできますか？

作成者編集：最後に Google AnalyticsとContent-Security-Policyヘッダー で詳しく説明されているソリューションを使用し、に戻ってga.js。それでも、analytics.jsを同じように使用できるかどうかを知りたいです。

作成者編集2：Googleから直接analytics.jsを使用し、他のSO投稿と同じ原則を使用することが可能であるようです。

HTMLファイルの下部：

<script type="text/javascript" src="https://ssl.google-analytics.com/analytics.js"></script>
<script type="text/javascript" src="/js/analytics.js"></script>

Analytics.jsの内容：

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

CSP：

Header set Content-Security-Policy "script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com; object-src 'self'"

これはテストされていません-GoogleAnalyticsがデータを受信して​​いるかどうかは確認していませんが、コンソールまたはCSPエラーはありません。成功を祈っている。

javascriptgoogle-analyticscontent-security-policy
24
JamesG

Googleアナリティクスドメインがまだホワイトリストに登録されていないウェブアプリにCSPヘッダーが設定されているようです。クライアントが外部ドメインに対して行うすべてのリクエストは、明示的にホワイトリストに登録する必要があります。 （これは良いリファレンスです： https://hacks.mozilla.org/2016/02/implementing-content-security-policy/ ）。

ブラウザコンソールに表示されるCSPエラーは、CSPヘッダーにホワイトリストに登録する必要があるものを非常によく表しています。

たとえば、この場合、

次のコンテンツセキュリティポリシーディレクティブに違反しているため、画像の読み込みを拒否しました ' https://www.google.co.in/ ...'： "img-src"。

これでエラーが解決します。

img-src https://www.google.co.in <other-domains>
2
Anbarasi U

https://developers.google.com/analytics/devguides/collection/analyticsjs/ で説明されている別の方法を使用すると役に立ちました。これは、2番目の編集で説明したOPによく似ており、ナンスを適用するカスタムインラインスクリプトを使用するか、OPが提案するように、インラインスクリプトのコンテンツを別のスクリプトにアウトソーシングできます。 analytics.jsを参照するscriptタグのasync属性を忘れないでください。

この方法を使用すると、HTMLにスクリプトが挿入されないため、エラーや警告は発生しません。

これが私が投稿したリンクからの関連部分です：

代替の非同期追跡スニペット

上記のJavaScriptトラッキングスニペットは、スクリプトがすべてのブラウザーで非同期にロードおよび実行されることを保証しますが、最新のブラウザーがスクリプトをプリロードできないという欠点があります。

以下の代替の非同期追跡スニペットは、プリロードのサポートを追加します。これにより、最新のブラウザーでパフォーマンスがわずかに向上しますが、IE 9以前の認識しないモバイルブラウザーでは同期ロードと実行に低下する可能性があります非同期スクリプト属性。訪問者が主に最新のブラウザを使用してサイトにアクセスする場合にのみ、このトラッキングスニペットを使用してください。

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).Push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
0
quambo