콘텐츠 보안 정책과 함께 태그 관리자 사용

콘텐츠 보안 정책(CSP)은 애플리케이션에서 로드하는 리소스를 개발자가 제어할 수 있도록 하여 특정 유형의 삽입 기반 공격을 방지할 수 있도록 지원하는 보편적인 웹 보안 표준입니다. 이 가이드를 사용하여 CSP를 사용하는 사이트에 Google 태그 관리자를 배포하는 방법을 알아보세요.

참고: CSP가 정상적으로 작동하는지 확인하려면 report-uri 또는 report-to 지시어를 사용하여 정책 위반 보고서를 확인하는 것이 좋습니다.

CSP를 사용하도록 컨테이너 태그 사용 설정

CSP가 적용되는 페이지에서 Google 태그 관리자를 사용하려면 CSP가 태그 관리자 컨테이너 코드 실행을 허용해야 합니다. 이 코드는 gtm.js 스크립트를 삽입하는 인라인 자바스크립트 코드로 빌드합니다. nonce 또는 해시를 사용하는 등 여러 가지 방법으로 빌드할 수 있습니다. 권장되는 방법은 서버가 각 응답에 대해 개별적으로 생성하는 추측 불가능한 임의의 값인 nonce를 사용하는 것입니다. Content-Security-Policy script-src 지시어에 nonce 값을 제공합니다.

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

그런 다음 인라인 태그 관리자 컨테이너 코드의 nonce 인식 버전을 사용합니다. 인라인 스크립트 요소의 nonce 속성을 다음과 동일한 값으로 설정합니다.

<!-- 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 -->

그러면 태그 관리자가 페이지에 추가하는 모든 스크립트에 nonce를 적용합니다.

CSP에서 인라인 스크립트의 해시를 제공하는 것과 같이, 다른 방법으로 인라인 스크립트 실행을 사용 설정할 수도 있습니다.

권장되는 nonce 또는 해시 접근 방법을 사용할 수 없는 경우 CSP의 script-src 섹션에 'unsafe-inline' 지시어를 추가하여 태그 관리자 인라인 스크립트를 사용 설정할 수 있습니다.

'unsafe-inline'은 사용하지 않는 것이 좋습니다. 이 방법을 사용하기 전에 CSP에 이 지시어를 추가할 때 미치는 보안상의 영향을 신중히 고려해야 합니다.

이 방법을 사용하려면 CSP에 다음 지시어가 필요합니다.

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com

참고: 일부 태그는 다른 출처에서 콘텐츠를 로드하거나 다른 출처로 요청하므로, 올바르게 작동하도록 하려면 추가 CSP 지시어를 사용해야 합니다.

맞춤 자바스크립트 변수

맞춤 자바스크립트 변수가 구현되는 방식으로 인해, CSP가 있는 경우 CSP의 script-src 섹션에 'unsafe-eval' 지시어가 주어지지 않으면 맞춤 자바스크립트 변수는 undefined에 대해 평가합니다.

잠재적인 보안 취약점을 방지하려면 절대적으로 필요한 경우에만 'unsafe-eval'을 사용하세요.

script-src: 'unsafe-eval'

참고: 맞춤 자바스크립트 변수의 대안으로 맞춤 템플릿을 사용하는 것도 권장됩니다. 맞춤 템플릿을 사용하면 'unsafe-eval'을 사용할 필요가 없는 맞춤 태그와 변수를 만들 수 있습니다.

미리보기 모드

Google 태그 관리자의 미리보기 모드를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

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: https://fonts.gstatic.com data:

참고: 페이지가 비보안 연결을 통해 제공되는 경우 script-src 지시어에 비보안 http://googletagmanager.com http://tagmanager.google.com URL이 대신 포함되어야 합니다.

Google 애널리틱스 4(Google 애널리틱스)

Google 애널리틱스 4(Google 애널리틱스) 태그를 사용하려면 CSP에 다음과 같은 지시어가 포함되어야 합니다.

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

Google 신호 데이터를 사용해 Google 애널리틱스 4(Google 애널리틱스)를 배포하는 경우 CSP에 다음과 같은 지시어가 포함되어야 합니다.

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>

참고: CSP 구문에서 호스트 이름의 오른쪽에 와일드 카드를 사용할 수 없으므로 각 Google 최상위 도메인(TLD)은 개별적으로 지정해야 합니다. 지원되는 모든 Google TLD의 목록은 https://www.google.com/supported_domains에서 확인하세요.

유니버설 애널리틱스(Google 애널리틱스)

유니버설 애널리틱스(Google 애널리틱스) 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

참고: 페이지가 비보안 연결을 통해 제공되면 script-src 지시어에 https://ssl.google-analytics.com을 포함할 필요가 없습니다.

Google Ads 전환

Google Ads 전환 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

보안 연결의 경우 다음과 같습니다.

script-src: https://www.googleadservices.com https://www.google.com
img-src: https://googleads.g.doubleclick.net https://www.google.com https://google.com

비보안 연결의 경우 다음과 같습니다.

script-src: www.googleadservices.com www.google.com
img-src: googleads.g.doubleclick.net www.google.com google.com

Google Ads 리마케팅

Google Ads 리마케팅 태그를 사용하려면 CSP에 다음 지시어가 포함되어야 합니다.

보안 연결의 경우 다음과 같습니다.

script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com https://google.com
frame-src: https://bid.g.doubleclick.net

비보안 연결의 경우 다음과 같습니다.

script-src: www.googleadservices.com googleads.g.doubleclick.net www.google.com
img-src: www.google.com google.com
frame-src: bid.g.doubleclick.net

플러드라이트

플러드라이트 사용자는 다음 구성을 사용하여 CSP를 사용 설정할 수 있습니다. <FLOODLIGHT-CONFIG-ID> 값을 특정 플러드라이트 광고주 ID 또는 *로 대체하여 모든 광고주 ID를 허용합니다.

모든 사용자의 경우 다음과 같습니다.

img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

태그 관리자의 '맞춤 스크립트' 비콘의 경우 다음과 같습니다.

frame-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

이미지 태그의 경우 다음과 같습니다.

img-src: https://ad.doubleclick.net

동의 모드의 경우 다음과 같습니다.

img-src: https://ade.googlesyndication.com