Dokumen ini berisi rekomendasi cara mengonfigurasi Kebijakan Keamanan Konten (CSP) situs untuk Maps JavaScript API. Karena berbagai jenis dan versi browser digunakan oleh pengguna akhir, developer sebaiknya menggunakan contoh ini sebagai referensi, melakukan penyesuaian sehingga tidak terjadi lagi pelanggaran CSP.
Pelajari lebih lanjut Kebijakan Keamanan Konten.
CSP Ketat
Sebaiknya gunakan CSP ketat daripada daftar CSP yang diizinkan untuk mengurangi kemungkinan serangan keamanan.
Maps JavaScript API mendukung penggunaan CSP ketat berbasis nonce.
Situs harus mengisi elemen script dan style dengan nilai nonce.
Secara internal, Maps JavaScript API akan menemukan elemen pertama tersebut, dan menerapkan nilai nonce-nya ke elemen gaya atau skrip yang disisipkan oleh skrip API.
Contoh
Contoh berikut menunjukkan contoh CSP, beserta halaman HTML tempatnya disematkan:
Contoh Kebijakan Keamanan Konten
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:;
Contoh halaman 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>
Daftar CSP yang Diizinkan
Jika Anda telah menyiapkan daftar CSP yang diizinkan, lihat daftar Domain Google Maps. Sebaiknya baca dokumen ini dan catatan rilis Maps JavaScript API untuk mengetahui info terbaru, dan menyertakan domain layanan baru ke dalam daftar yang diizinkan jika diperlukan.
Situs yang memuat Maps JavaScript API dari domain Google API lama (misalnya, maps.google.com) atau domain khusus wilayah (misalnya, maps.google.fr), juga harus menyertakan nama domain ini di setelan script-src CSP-nya, seperti yang ditunjukkan dalam contoh berikut:
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:;