ประกาศ: รูปแบบแผนที่ฐานใหม่จะพร้อมให้บริการใน Google Maps Platform เร็วๆ นี้ การอัปเดตรูปแบบแผนที่นี้ประกอบด้วยชุดสีเริ่มต้นใหม่ หมุดที่ทันสมัยขึ้น และการปรับปรุงประสบการณ์การใช้งานแผนที่และความสามารถในการใช้งาน รูปแบบแผนที่ทั้งหมดจะอัปเดตโดยอัตโนมัติในเดือนมีนาคม 2025 ดูข้อมูลเพิ่มเติมเกี่ยวกับความพร้อมให้บริการและวิธีเลือกใช้ก่อนกำหนดได้ที่สไตล์แผนที่ใหม่สำหรับ Google Maps Platform

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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