Korzystanie z Menedżera tagów z Content Security Policy

Zasady zabezpieczeń treści (CSP) to szeroko obsługiwany standard zabezpieczeń internetowych, który ma zapobiegać niektórym typom ataków polegających na wstrzykiwaniu kodu, dając deweloperom kontrolę nad zasobami wczytywanymi przez ich aplikacje. Z tego przewodnika dowiesz się, jak wdrożyć Menedżera tagów Google w witrynach, które korzystają z CSP.

Włącz tag kontenera, aby używać CSP

Aby używać Menedżera tagów Google na stronie z zasadami CSP, zasady te muszą zezwalać na wykonywanie kodu kontenera Menedżera tagów. Ten kod jest tworzony jako wbudowany kod JavaScript, który wstrzykuje skrypt gtm.js. Można to zrobić na kilka sposobów, np. za pomocą nonce lub hasza. Zalecana metoda to użycie nonce, czyli losowej wartości, której nie da się odgadnąć i która jest generowana przez serwer osobno dla każdej odpowiedzi. Podaj wartość nonce w dyrektywie Content-Security-Policy script-src:

Content-Security-Policy:
script-src 'nonce-{SERVER-GENERATED-NONCE}';
img-src www.googletagmanager.com;
connect-src www.googletagmanager.com

Następnie użyj wersji kodu kontenera Menedżera tagów uwzględniającej nonce. Ustaw atrybut nonce w elementzie skryptu w ciele wiadomości na tę samą wartość:

<!-- Google Tag Manager -->
<script nonce='{SERVER-GENERATED-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-XXXXXX');</script>
<!-- End Google Tag Manager -->

Menedżer tagów rozpowszechnia wtedy nonce’a do wszystkich skryptów dodanych do strony.

Istnieją też inne sposoby włączania wykonywania skryptu wbudowanego, np. podanie hasza skryptu wbudowanego w CSP.

Jeśli zalecane podejścia do tworzenia skrótu lub haszowania nie są możliwe do zastosowania, możesz włączyć skrypt wbudowany Menedżera tagów, dodając dyrektywę 'unsafe-inline' do sekcji script-src w regułkach CSP.

Aby zastosować to podejście, w nagłówku CSP musisz umieścić te dyrektywy:

Dyrektywa Treść
script-src 'unsafe-inline' https://www.googletagmanager.com
img-src www.googletagmanager.com
connect-src www.googletagmanager.com

Niestandardowe zmienne JavaScript

Ze względu na sposób implementacji niestandardowych zmiennych JavaScript będą one oceniane jako undefined w ramach CSP, chyba że w sekcji script-src tego pliku podana jest dyrektywa 'unsafe-eval'.

Dyrektywa Treść
script-src 'unsafe-eval'

Tryb podglądu

Aby móc korzystać z trybu podglądu w Menedżerze tagów Google, musisz umieścić w nagłówku CSP te dyrektywy:

Dyrektywa Treść
script-src https://googletagmanager.com https://tagmanager.google.com
style-src https://googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com
img-src https://googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com
font-src Dane z https://fonts.gstatic.com:

Google Analytics 4 (Google Analytics)

Aby móc korzystać z tagu Google Analytics 4 (Google Analytics), musisz umieścić w nagłówku CSP te dyrektywy:

Dyrektywa Treść
script-src https://*.googletagmanager.com
img-src https://*.google-analytics.com https://*.googletagmanager.com
connect-src https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com

W przypadku wdrożeń Google Analytics 4 (Google Analytics) korzystających z Google Signals nagłówek CSP musi zawierać te dyrektywy:

Dyrektywa Treść
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>
frame-src https://td.doubleclick.net

Aby używać tagu konwersji, remarketingowego lub łączącego konwersje Google Ads, musisz umieścić w nagłówku CSP te dyrektywy:

Dyrektywa Treść
script-src https://www.googleadservices.com https://www.google.com https://www.googletagmanager.com
https://pagead2.googlesyndication.com https://googleads.g.doubleclick.net
img-src https://www.googletagmanager.com https://googleads.g.doubleclick.net https://www.google.com
https://google.com https://www.google.com.<TLD> https://pagead2.googlesyndication.com
frame-src https://www.googletagmanager.com https://td.doubleclick.net
connect-src https://pagead2.googlesyndication.com https://www.googleadservices.com
https://www.google.com https://google.com

Aby używać sygnałów danych o użytkownikach Google Ads w ramach bezpiecznych kontekstów, nagłówek CSP musi zawierać te dyrektywy:

Dyrektywa Treść
script-src https://www.googletagmanager.com
frame-src https://www.googletagmanager.com
connect-src https://google.com https://www.google.com

Beacon danych użytkownika Google Ads nie działa w niebezpiecznych kontekstach, więc w takich przypadkach konfiguracja CSP nie ma zastosowania.

Floodlight

Użytkownicy Floodlight mogą włączyć usługi CSP, korzystając z tych konfiguracji. Zastąp wartości <FLOODLIGHT-CONFIG-ID> określonym identyfikatorem reklamodawcy Floodlight lub wartością *, aby zezwolić na dowolny identyfikator reklamodawcy:

Wszyscy użytkownicy:

Dyrektywa Treść
img-src https://ad.doubleclick.net https://ade.googlesyndication.com https://adservice.google.com
https://www.googletagmanager.com
frame-src https://td.doubleclick.net
connect-src https://pagead2.googlesyndication.com https://www.google.com https://www.googleadservices.com

W przypadku sygnałów „niestandardowe skrypty”:

Dyrektywa Treść
frame-src https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

Tagi graficzne:

Dyrektywa Treść
img-src https://ad.doubleclick.net https://ade.googlesyndication.com