นโยบายรักษาความปลอดภัยเนื้อหา (CSP) เป็นมาตรฐานความปลอดภัยของเว็บที่ได้รับการสนับสนุนอย่างกว้างขวาง ซึ่งมีวัตถุประสงค์เพื่อป้องกันการโจมตีบางประเภทที่อิงตามการแทรกโค้ดโดยให้สิทธิ์นักพัฒนาแอปในการควบคุมทรัพยากรที่แอปพลิเคชันโหลด ใช้คู่มือนี้เพื่อทำความเข้าใจวิธีติดตั้งใช้งาน Google Tag Manager ในเว็บไซต์ที่ใช้ CSP
เปิดใช้คอนเทนเนอร์แท็กเพื่อใช้ CSP
หากต้องการใช้ Google Tag Manager ในหน้าเว็บที่มี CSP คุณต้องอนุญาตให้ CSP เรียกใช้โค้ดคอนเทนเนอร์ของ Tag Manager ได้ โค้ดนี้สร้างขึ้นเป็นโค้ด JavaScript แบบอินไลน์ที่แทรกสคริปต์ gtm.js คุณทำได้หลายวิธี เช่น การใช้ Nonce หรือ Hash วิธีที่แนะนำคือการใช้
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 ไปยังสคริปต์ใดก็ตามที่เพิ่มลงในหน้าเว็บ
นอกจากนี้ยังมีวิธีอื่นๆ ในการเปิดใช้การเรียกใช้สคริปต์แบบอินไลน์ เช่น การระบุ Hash ของสคริปต์แบบอินไลน์ ใน CSP
หากวิธี Nonce หรือ Hash ที่แนะนำไม่สามารถทำได้ คุณสามารถเปิดใช้สคริปต์แบบอินไลน์ของ 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
CSP ต้องมีคําสั่งต่อไปนี้จึงจะใช้แท็ก Google Analytics 4 ได้ ปลายทางที่ทำเครื่องหมายด้วย 1 มีไว้สำหรับฟีเจอร์โฆษณา โดยเฉพาะ แต่เราขอแนะนำให้รวมปลายทางเหล่านี้ไว้ในระหว่างการตั้งค่าเริ่มต้น เพื่อที่คุณจะได้ไม่ต้องอัปเดต CSP หากลิงก์ Google Ads ในภายหลัง
| คำสั่ง | เนื้อหา |
|---|---|
| script-src | https://*.googletagmanager.com |
| img-src | https://*.google-analytics.com https://*.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://*.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 |
1 ปลายทางโฆษณา: โดเมนเหล่านี้จำเป็นต้องใช้งานจริงสำหรับ การติดตั้งใช้งาน GA4 ที่ลิงก์กับ Google Ads หรือใช้ฟีเจอร์โฆษณาเท่านั้น
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 |
Merchant Center
CSP ต้องมีคําสั่งต่อไปนี้จึงจะส่งข้อมูลไปยัง Merchant Center ได้
| คำสั่ง | เนื้อหา |
|---|---|
| script-src | https://*.googletagmanager.com |
| img-src | https://*.merchant-center-analytics.goog |
| connect-src | https://*.merchant-center-analytics.goog |
Service Worker
CSP ต้องมีคําสั่งต่อไปนี้จึงจะใช้ Service Worker สําหรับการจับคู่ที่ปรับปรุงแล้ว บีคอนข้อมูลผู้ใช้ และ Conversion ของโฆษณาได้
| คำสั่ง | เนื้อหา |
|---|---|
| frame-src | https://www.googletagmanager.com |
แก้ปัญหาด้วยผู้ช่วยแท็ก
หากต้องการแก้ปัญหาเกี่ยวกับนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ให้ใช้ ผู้ช่วยแท็ก ผู้ช่วยแท็กจะแสดงรายการทรัพยากรที่นโยบายรักษาความปลอดภัยเนื้อหาบล็อก
เปิด ผู้ช่วยแท็ก แล้วป้อน URL ของเว็บไซต์ เว็บไซต์จะเปิดขึ้นในแท็บใหม่
หากนโยบายรักษาความปลอดภัยเนื้อหาในหน้าเว็บกำลังบล็อกทรัพยากร ระบบจะแสดงปัญหา CSP ในส่วนปัญหาของหน้าเว็บ ของผู้ช่วยแท็ก
เลือกดูปัญหา ข้างปัญหา CSP เพื่อดูรายการทรัพยากรทั้งหมดที่ถูกบล็อกในหน้าเว็บ
เพิ่มทรัพยากรที่ถูกบล็อกทั้งหมดลงในนโยบายรักษาความปลอดภัยเนื้อหา