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

Content Security Policy (CSP) to powszechnie obsługiwany standard bezpieczeństwa w internecie, który ma zapobiegać niektórym rodzajom ataków opartych na wstrzykiwaniu kodu. Umożliwia on deweloperom kontrolowanie zasobów wczytywanych przez ich aplikacje. Z tego przewodnika dowiesz się, jak wdrożyć Menedżera tagów Google w witrynach, które korzystają z CSP.

Uwaga: aby mieć pewność, że CSP działa zgodnie z oczekiwaniami, najlepiej używać dyrektyw report-to do otrzymywania raportów o naruszeniach zasad.

Włącz tag w kontenerze, aby korzystać z CSP

Aby korzystać z Menedżera tagów Google na stronie z CSP, CSP musi zezwalać na wykonywanie kodu kontenera Menedżera tagów. Ten kod jest wbudowany jako wbudowany kod JavaScript, który wstrzykuje skrypt gtm.js. Można to zrobić na kilka sposobów, np. za pomocą nonce lub hasha. Zalecana metoda to użycie a nonce, czyli nieodgadnionego, losowego ciągu znaków, który serwer generuje indywidualnie dla każdej odpowiedzi. Podaj wartość nonce w dyrektywie script-src-elem w Content-Security-Policy:

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

Następnie użyj wersji wbudowanego kodu kontenera Menedżera tagów, która uwzględnia nonce. Ustaw ten sam atrybut nonce w elemencie skryptu wbudowanego:

<!-- 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 będzie następnie propagować nonce do wszystkich skryptów, które dodaje do strony.

Istnieją inne sposoby na umożliwienie wykonywania skryptu wbudowanego, np. podanie hasha skryptu wbudowanego w CSP.

Jeśli zalecane metody nonce lub hasha nie są możliwe, możesz włączyć skrypt wbudowany Menedżera tagów, dodając dyrektywę 'unsafe-inline' do sekcji script-src-elem w CSP.

Nie zalecamy używania 'unsafe-inline'. Zanim zastosujesz to rozwiązanie, dokładnie rozważ konsekwencje dodania tej dyrektywy do CSP dla bezpieczeństwa.

Aby korzystać z tej metody, w CSP musisz użyć tych dyrektyw:

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

Uwaga: niektóre tagi wczytują treści z innych źródeł lub wysyłają do nich żądania, dlatego do prawidłowego działania wymagają użycia dodatkowych dyrektyw CSP.

Niestandardowe zmienne JavaScript

Ze względu na sposób implementacji niestandardowych zmiennych JavaScript w przypadku CSP będą one przyjmować wartość undefined chyba że w sekcji script-src w CSP podana jest dyrektywa 'unsafe-eval'.

Aby uniknąć potencjalnych luk w zabezpieczeniach, używaj 'unsafe-eval' tylko wtedy, gdy jest to absolutnie konieczne.

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

Uwaga: szablony niestandardowe są zalecaną alternatywą dla niestandardowych zmiennych JavaScript. Można ich używać do tworzenia niestandardowych tagów i zmiennych, które nie wymagają użycia 'unsafe-eval'.

Tryb podglądu

Aby korzystać z trybu podglądu Menedżera tagów Google, w CSP musisz użyć tych dyrektyw:

Dyrektywa	Treść
script-src-elem	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:

Google Analytics

Aby używać tagu Google Analytics, w CSP musisz użyć tych dyrektyw. Punkty końcowe oznaczone numerem ¹ są przeznaczone specjalnie do funkcji reklamowych , ale zalecamy ich uwzględnienie podczas wstępnej konfiguracji, aby nie trzeba było aktualizować CSP , jeśli później połączysz Google Ads.

Dyrektywa	Treść
script-src-elem	https://www.googletagmanager.com
img-src	https://*.google-analytics.com https://www.googletagmanager.com https://*.g.doubleclick.net ^1 https://*.google.com ^1 https://*.google.<TLD> ^1
connect-src	https://*.google-analytics.com https://*.analytics.google.com https://www.googletagmanager.com https://*.g.doubleclick.net ^1 https://*.google.com ^1 https://*.google.<TLD> ^1 https://pagead2.googlesyndication.com ^1
frame-src	https://www.googletagmanager.com ^1

¹ Punkty końcowe reklam: te domeny są aktywnie wymagane tylko w przypadku wdrożeń Google Analytics, które są połączone z Google Ads lub korzystają z funkcji reklamowych.

Uwaga: każdą domenę najwyższego poziomu Google (TLD) trzeba określić osobno, ponieważ składnia CSP nie pozwala na używanie symboli wieloznacznych po prawej stronie nazwy hosta. Listę wszystkich obsługiwanych domen TLD Google znajdziesz na stronie: https://www.google.com/supported_domains.

Google Ads

Aby używać tagu konwersji, remarketingu lub tagu łączącego konwersje Google Ads, w CSP musisz użyć tych dyrektyw:

Dyrektywa	Treść
script-src-elem	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://pagead2.googlesyndication.com https://www.googleadservices.com https://google.com https://www.google.<TLD>
frame-src	https://www.googletagmanager.com
connect-src	https://pagead2.googlesyndication.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://ad.doubleclick.net https://www.google.com https://google.com https://www.google.<TLD>

Sygnał danych użytkownika Google Ads

Aby używać sygnałów danych użytkownika Google Ads w kontekstach bezpiecznych, w CSP musisz użyć tych dyrektyw:

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

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

Floodlight

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

W przypadku wszystkich użytkowników:

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

W przypadku sygnałów „skryptów niestandardowych”:

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

W przypadku tagów graficznych:

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

Merchant Center

Aby wysyłać dane do Merchant Center, w CSP musisz użyć tych dyrektyw:

Dyrektywa	Treść
script-src-elem	https://www.googletagmanager.com
img-src	https://*.merchant-center-analytics.goog
connect-src	https://*.merchant-center-analytics.goog

Skrypt service worker

Aby używać skryptu service worker do konwersji rozszerzonych, sygnałów danych użytkownika i konwersji reklam, w CSP musisz użyć tych dyrektyw:

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

Rozwiązywanie problemów za pomocą rozszerzenia Tag Assistant

Aby rozwiązywać problemy związane ze standardem Content Security Policy (CSP), użyj rozszerzenia Tag Assistant. Rozszerzenie Tag Assistant wyświetli listę zasobów, które są blokowane przez standard Content Security Policy.

1. Otwórz rozszerzenie Tag Assistant i wpisz adres URL swojej witryny. Otworzy się nowa karta z Twoją witryną.

2. Jeśli standard Content Security Policy na Twojej stronie blokuje zasób, w sekcji Problemy ze stroną w rozszerzeniu Tag Assistant wyświetli się problem z CSP.

   

3. Kliknij Wyświetl problem obok problemu z CSP, aby wyświetlić listę wszystkich zablokowanych zasobów na stronie.

4. Dodaj wszystkie zablokowane zasoby do standardu Content Security Policy.