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