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