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