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