เอกสารนี้ให้คำแนะนำเกี่ยวกับวิธีกำหนดค่านโยบายรักษาความปลอดภัยเนื้อหา (CSP) ของเว็บไซต์สำหรับ Maps JavaScript API เนื่องจากผู้ใช้ปลายทางใช้เบราว์เซอร์หลากหลายประเภทและเวอร์ชัน เราจึงขอแนะนำให้นักพัฒนาแอปใช้ตัวอย่างนี้เป็นข้อมูลอ้างอิงและปรับแต่งจนกว่าจะไม่มีการละเมิด CSP อีก
ดูข้อมูลเพิ่มเติมเกี่ยวกับนโยบายรักษาความปลอดภัยเนื้อหา
CSP แบบเข้มงวด
เราขอแนะนำให้ใช้ CSP แบบเข้มงวด
แทน CSP แบบรายการที่อนุญาตเพื่อลดโอกาสที่จะเกิดการโจมตีด้านความปลอดภัย
Maps JavaScript API รองรับการใช้ CSP แบบเข้มงวดตามค่า Nonce
เว็บไซต์ต้องป้อนค่า Nonce ให้กับองค์ประกอบ script และ style
ภายใน 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) ต้องใส่ชื่อโดเมนเหล่านี้ในการตั้งค่า script-src ของ CSP ด้วย ดังที่แสดงในตัวอย่างต่อไปนี้
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:;