นโยบายรักษาความปลอดภัยเนื้อหา (CSP) เป็นเว็บที่ได้รับการสนับสนุนอย่างกว้างขวาง มาตรฐานความปลอดภัยที่มีไว้เพื่อป้องกันการโจมตีด้วยการแทรกบางประเภท โดยให้นักพัฒนาซอฟต์แวร์ควบคุมทรัพยากรที่โหลดโดยแอปพลิเคชันของตนได้ ใช้คู่มือนี้เพื่อทําความเข้าใจวิธีติดตั้งใช้งาน Google Tag Manager ในเว็บไซต์ที่ ใช้ CSP
เปิดใช้คอนเทนเนอร์แท็กเพื่อใช้ CSP
ในการใช้ Google Tag Manager บนหน้าเว็บที่มี CSP นั้น CSP จะต้องอนุญาต
การดำเนินการกับโค้ดคอนเทนเนอร์ของ Tag Manager โค้ดนี้สร้างขึ้นเป็นแบบในหน้า
โค้ด JavaScript ที่แทรกสคริปต์ gtm.js ซึ่งมีหลายวิธีที่สามารถทำได้
เช่น การใช้ Nonce หรือแฮช วิธีการที่แนะนำคือการใช้
nonce ซึ่งควรเป็นค่าแบบสุ่มที่คาดเดาไม่ได้ที่เซิร์ฟเวอร์สร้างขึ้น
แยกกันสำหรับแต่ละคำตอบ ระบุค่า Nonce ใน Content-Security-
คำสั่ง script-src ของนโยบาย:
Content-Security-Policy:
script-src 'nonce-{SERVER-GENERATED-NONCE}';
img-src www.googletagmanager.com;
connect-src www.googletagmanager.com
จากนั้นใช้โค้ดคอนเทนเนอร์ Tag Manager ในบรรทัดเวอร์ชัน Nonce-Aware ตั้งค่าแอตทริบิวต์ 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 หรือแฮชที่แนะนำใช้ไม่ได้ คุณอาจ
เปิดใช้สคริปต์ในหน้าของ Tag Manager โดยเพิ่มพารามิเตอร์ 'unsafe-inline'
ในส่วน script-src ของ CSP
CSP ต้องมีคำสั่งต่อไปนี้เพื่อใช้แนวทางนี้
script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com
connect-src www.googletagmanager.com
ตัวแปร JavaScript ที่กำหนดเอง
สืบเนื่องจากวิธีการติดตั้งใช้งานตัวแปร JavaScript ที่กำหนดเอง
จะประเมินเป็น undefined เมื่อมี CSP เว้นแต่ 'unsafe-eval'
ระบุไว้ในส่วน script-src ของ CSP
script-src: 'unsafe-eval'
โหมดแสดงพรีวิว
ในการใช้โหมดแสดงตัวอย่างของ Google Tag Manager 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:
Google Analytics 4 (Google Analytics)
หากต้องการใช้แท็ก Google Analytics 4 (Google Analytics) 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 Analytics 4 (Google Analytics) โดยใช้ Google Signals พร็อพเพอร์ตี้ 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>
frame-src: https://td.doubleclick.net
Universal Analytics (Google Analytics)
ในการใช้แท็ก Universal Analytics (Google Analytics) 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
Conversion ของ Google Ads
หากต้องการใช้แท็ก Conversion ของ Google Ads CSP ต้องมีข้อมูลต่อไปนี้ คำสั่ง:
เพื่อการเชื่อมต่อที่ปลอดภัย ให้ทำดังนี้
script-src: https://www.googleadservices.com https://www.google.com https://www.googletagmanager.com
img-src: https://googleads.g.doubleclick.net https://www.google.com https://google.com
frame-src: https://www.googletagmanager.com https://td.doubleclick.net
สำหรับการเชื่อมต่อที่ไม่ปลอดภัย
script-src: www.googleadservices.com www.google.com www.googletagmanager.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 https://td.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 td.doubleclick.net
บีคอนข้อมูลผู้ใช้ Google Ads
ในการใช้บีคอนข้อมูลผู้ใช้ของ Google Ads เมื่อทำงานในบริบทที่ปลอดภัย CSP ต้องมีคำสั่งต่อไปนี้
script-src: https://www.googletagmanager.com
frame-src: https://www.googletagmanager.com
บีคอนข้อมูลผู้ใช้ของ Google Ads ไม่ทำงานในบริบทที่ไม่ปลอดภัย CSP ในกรณีเช่นนี้จะไม่มีผลใดๆ
Floodlight
ผู้ใช้ Floodlight จะเปิดใช้ CSP ได้โดยใช้การกำหนดค่าต่อไปนี้ แทนที่
<FLOODLIGHT-CONFIG-ID> ที่มีค่าที่เฉพาะเจาะจง
รหัสผู้ลงโฆษณา Floodlight หรือ * เพื่ออนุญาตรหัสผู้ลงโฆษณา
สำหรับผู้ใช้ทุกคน
img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net
frame-src: https://td.doubleclick.net
สำหรับ "สคริปต์ที่กำหนดเอง" บีคอนใน Tag Manager
frame-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net
สำหรับแท็กรูปภาพ:
img-src: https://ad.doubleclick.net
สําหรับโหมดความยินยอม ให้ทำดังนี้
img-src: https://ade.googlesyndication.com