คู่มือนโยบายรักษาความปลอดภัยเนื้อหา

เอกสารนี้ให้คำแนะนำเกี่ยวกับวิธีกำหนดค่านโยบายรักษาความปลอดภัยเนื้อหา (CSP) ของเว็บไซต์สำหรับ Maps JavaScript API เนื่องจากผู้ใช้ปลายทางใช้เบราว์เซอร์หลากหลายประเภทและเวอร์ชัน เราจึงขอแนะนำให้นักพัฒนาซอฟต์แวร์ใช้ตัวอย่างนี้เป็นข้อมูลอ้างอิง โดยปรับแต่งจนกว่าจะไม่มีการละเมิด CSP อีกต่อไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับนโยบายรักษาความปลอดภัยเนื้อหา

CSP แบบเข้มงวด

เราขอแนะนำให้ใช้ CSP แบบเข้มงวดแทน CSP รายการที่อนุญาตเพื่อช่วยปกป้องเว็บไซต์จากการโจมตี Cross-site Scripting (XSS) Maps JavaScript API รองรับการใช้ CSP แบบเข้มงวดที่อิงตาม Nonce เว็บไซต์ต้องป้อนค่า Nonce ทั้งในองค์ประกอบ script และ style ภายใน Maps JavaScript API จะค้นหาองค์ประกอบแรกดังกล่าว และใช้ค่า Nonce กับองค์ประกอบสไตล์หรือสคริปต์ที่แทรกโดยสคริปต์ API ตามลำดับ

คีย์เวิร์ด 'strict-dynamic' ในตัวอย่างต่อไปนี้ช่วยให้สคริปต์ที่มี Nonce ที่ถูกต้องโหลดสคริปต์อื่นๆ ได้ เนื่องจากหน้าเว็บของคุณโหลด Maps JavaScript API ด้วย Nonce ทาง API จึงสามารถโหลดสคริปต์เพิ่มเติมที่จำเป็นได้ คุณจึงไม่จำเป็นต้องระบุโดเมน Google ใดๆ ใน script-src เบราว์เซอร์ที่รองรับ 'strict-dynamic' จะไม่สนใจแหล่งที่มา https: ในตัวอย่าง โดยจะใช้เป็นทางเลือกสำรองสำหรับเบราว์เซอร์เวอร์ชันเก่าเท่านั้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดง CSP ตัวอย่างพร้อมกับหน้า HTML ที่ฝังไว้

ตัวอย่างนโยบายรักษาความปลอดภัยเนื้อหา

script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
worker-src blob:;

ตัวอย่างหน้า HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" nonce="{style value}">
    <style nonce="{style value}">...</style>
    ...
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async nonce="{script value}"></script>
    <script nonce="{script value}"> function initMap() { ... } </script>
  </body>
</html>

CSP รายการที่อนุญาต

หากคุณตั้งค่า CSP รายการที่อนุญาต โปรดดูรายการโดเมน Google Maps เราขอแนะนำให้อ่านเอกสารนี้และบันทึกประจำรุ่นของ Maps JavaScript API เพื่อติดตามข้อมูลล่าสุด และเพิ่มโดเมนบริการใหม่ลงในรายการที่อนุญาตหากจำเป็น

เว็บไซต์ที่โหลด Maps JavaScript API จากโดเมน Google APIs เดิม (เช่น maps.google.com) หรือโดเมนเฉพาะภูมิภาค (เช่น maps.google.fr) ต้องระบุชื่อโดเมนเหล่านี้ในการตั้งค่า CSP script-src ด้วย ดังที่แสดงในตัวอย่างต่อไปนี้

script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com  *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com  data: blob:;
font-src https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
worker-src blob:;