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

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

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

CSP แบบเข้มงวด

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

ตัวอย่าง

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

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

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:;