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

เอกสารนี้ให้คำแนะนำเกี่ยวกับวิธีกำหนดค่านโยบายความปลอดภัยของเนื้อหา (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:;