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

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

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

CSP ที่เข้มงวด

เราขอแนะนำให้ใช้ CSP ที่เข้มงวด แทน CSP ที่ใช้รายการที่อนุญาตเพื่อช่วยปกป้องเว็บไซต์จากการโจมตี Cross-site Scripting (XSS) Maps JavaScript API รองรับการใช้ CSP ที่เข้มงวดซึ่งอิงตาม Nonce เว็บไซต์ต้องป้อนข้อมูลทั้งองค์ประกอบ script และ style ด้วยค่า Nonce ภายใน Maps JavaScript API จะค้นหาองค์ประกอบแรกดังกล่าวและใช้ค่า Nonce กับองค์ประกอบสไตล์หรือสคริปต์ที่แทรกโดยสคริปต์ API ตามลำดับ

คีย์เวิร์ด 'strict-dynamic' ในตัวอย่างต่อไปนี้ช่วยให้สคริปต์ที่มี Nonce ที่ถูกต้องโหลดสคริปต์อื่นๆ ได้ เนื่องจากหน้าเว็บโหลด Maps JavaScript API ด้วย Nonce API จึงโหลดสคริปต์เพิ่มเติมที่จำเป็นได้ คุณจึงไม่จำเป็นต้องระบุโดเมนของ Google ใน script-src เบราว์เซอร์ที่รองรับ 'strict-dynamic' จะไม่สนใจแหล่งที่มา https: ในตัวอย่าง โดยแหล่งที่มานี้เป็นเพียงตัวเลือกสำรองสำหรับเบราว์เซอร์เวอร์ชันเก่า

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดง 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) ต้องระบุชื่อโดเมนเหล่านี้ในการตั้งค่า 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:;