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

เอกสารนี้จะให้คำแนะนำเกี่ยวกับวิธีกำหนดค่านโยบายรักษาความปลอดภัยเนื้อหา (CSP) ของเว็บไซต์สำหรับ Maps JavaScript API เนื่องจากผู้ใช้ปลายทางใช้เบราว์เซอร์หลายประเภทและเวอร์ชันที่หลากหลาย เราจึงขอแนะนำให้นักพัฒนาซอฟต์แวร์ใช้ตัวอย่างนี้เป็นข้อมูลอ้างอิง แล้วปรับแต่งจนกว่าจะไม่เกิดการละเมิด CSE อีก

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

CSP เข้มงวด

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