ใช้ Tag Manager กับนโยบายรักษาความปลอดภัยเนื้อหา

นโยบายรักษาความปลอดภัยเนื้อหา (CSP) เป็นมาตรฐานความปลอดภัยของเว็บที่ได้รับการสนับสนุนอย่างกว้างขวาง ซึ่งมีวัตถุประสงค์เพื่อป้องกันการโจมตีบางประเภทที่อิงตามการแทรกโค้ดโดยให้สิทธิ์นักพัฒนาแอปในการควบคุมทรัพยากรที่แอปพลิเคชันโหลด ใช้คำแนะนำนี้เพื่อทำความเข้าใจวิธีติดตั้งใช้งาน Google Tag Manager ในเว็บไซต์ที่ใช้ CSP

หมายเหตุ: เพื่อให้ CSP ทำงานตามที่คาดไว้ วิธีที่ดีที่สุดคือใช้คําสั่ง report-to เพื่อรับรายงานการละเมิดนโยบาย

เปิดใช้คอนเทนเนอร์แท็กเพื่อใช้ 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

เราไม่แนะนำให้ใช้ 'unsafe-inline' คุณควร พิจารณาผลกระทบด้านความปลอดภัยของการเพิ่มคําสั่งนี้ลงใน CSP อย่างรอบคอบก่อนที่จะใช้วิธีนี้

คุณต้องมีคําสั่งต่อไปนี้ใน CSP เพื่อใช้วิธีนี้

คำสั่ง	เนื้อหา
script-src	'unsafe-inline' https://www.googletagmanager.com
img-src	www.googletagmanager.com
connect-src	www.googletagmanager.com www.google.com

หมายเหตุ: แท็กบางรายการจะโหลดเนื้อหาจากต้นทางอื่นหรือส่งคําขอไปยังต้นทางอื่น จึง ต้องใช้คําสั่ง CSP เพิ่มเติมเพื่อให้ทํางานได้อย่างถูกต้อง

ตัวแปร JavaScript ที่กําหนดเอง

เนื่องจากวิธีติดตั้งใช้งานตัวแปร JavaScript ที่กําหนดเอง ตัวแปรเหล่านี้ จะประเมินเป็น undefined หากมี CSP เว้นแต่จะมีการระบุคําสั่ง 'unsafe-eval' ในส่วน script-src ของ CSP

ใช้ 'unsafe-eval' เฉพาะเมื่อจําเป็นจริงๆ เท่านั้นเพื่อหลีกเลี่ยงช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น

คำสั่ง	เนื้อหา
script-src	'unsafe-eval'

หมายเหตุ: เทมเพลตที่กําหนดเอง เป็นตัวเลือกที่แนะนําแทนตัวแปร JavaScript ที่กําหนดเอง คุณสามารถใช้เทมเพลตที่กําหนดเองเพื่อสร้างแท็กและตัวแปรที่กําหนดเองซึ่งไม่จําเป็นต้องใช้ 'unsafe-eval'

โหมดแสดงพรีวิว

CSP ต้องมีคําสั่งต่อไปนี้จึงจะใช้โหมดแสดงพรีวิวของ Google Tag Manager ได้

คำสั่ง	เนื้อหา
script-src	https://www.googletagmanager.com https://tagmanager.google.com
style-src	https://www.googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com
img-src	https://www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com
font-src	https://fonts.gstatic.com data:

Google Analytics 4

CSP ต้องมีคําสั่งต่อไปนี้จึงจะใช้แท็ก Google Analytics 4 ได้ ปลายทางที่ทําเครื่องหมายด้วย ¹ มีไว้สําหรับฟีเจอร์โฆษณา โดยเฉพาะ แต่เราขอแนะนําให้รวมปลายทางเหล่านี้ไว้ในระหว่างการตั้งค่าเริ่มต้นเพื่อที่คุณจะได้ไม่ต้องอัปเดต 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

¹ ปลายทางโฆษณา: โดเมนเหล่านี้จําเป็นต้องใช้งานสําหรับ การติดตั้งใช้งาน GA4 ที่ลิงก์กับ Google Ads หรือใช้ฟีเจอร์โฆษณาเท่านั้น

หมายเหตุ: คุณต้องระบุโดเมนระดับบนสุด (TLD) ของ Google แต่ละรายการแยกกัน เนื่องจาก ไวยากรณ์ CSP ไม่อนุญาตให้ใช้อักขระไวลด์การ์ดทางด้านขวาของ ชื่อโฮสต์ ดูรายการ TLD ของ Google ทั้งหมดที่รองรับได้ที่ https://www.google.com/supported_domains.

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) ให้ใช้ ผู้ช่วยแท็ก ผู้ช่วยแท็กจะแสดงรายการทรัพยากรที่นโยบายรักษาความปลอดภัยเนื้อหาบล็อก

1. เปิด ผู้ช่วยแท็ก แล้วป้อน URL ของเว็บไซต์ เว็บไซต์จะเปิดขึ้นในแท็บใหม่

2. หากนโยบายรักษาความปลอดภัยเนื้อหาในหน้าเว็บของคุณบล็อกทรัพยากร ระบบจะแสดงปัญหา CSP ในส่วนปัญหาของหน้าเว็บ ของผู้ช่วยแท็ก

   

3. เลือกดูปัญหา ข้างปัญหา CSP เพื่อดูรายการทรัพยากรทั้งหมดที่ถูกบล็อกในหน้าเว็บ

4. เพิ่มทรัพยากรที่ถูกบล็อกทั้งหมดลงในนโยบายรักษาความปลอดภัยเนื้อหา