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