Questo documento fornisce consigli su come configurare la Content Security Policy (CSP) del sito web per l'API Maps JavaScript. Poiché gli utenti finali utilizzano un'ampia varietà di tipi e versioni di browser, gli sviluppatori sono invitati a utilizzare questo esempio come riferimento, perfezionandolo finché non si verificano ulteriori violazioni della CSP.
Scopri di più sulla Content Security Policy.
CSP restrittiva
Per proteggere il tuo sito web dagli attacchi di tipo "cross-site scripting" (XSS), ti
consigliamo di utilizzare una CSP restrittiva anziché
una CSP con lista consentita. L'API Maps JavaScript supporta l'utilizzo di una CSP restrittiva basata su nonce. I siti web devono popolare gli elementi script e style con un valore nonce. Internamente, l'API Maps JavaScript troverà il primo elemento di questo tipo e applicherà il relativo valore nonce agli elementi di stile o script inseriti dallo script dell'API.
La parola chiave 'strict-dynamic' nell'esempio seguente consente a uno script con
un nonce valido di caricare altri script. Poiché la pagina carica l'API Maps JavaScript con un nonce, l'API può caricare gli script aggiuntivi di cui ha bisogno, quindi non devi elencare alcun dominio Google in script-src. I browser che supportano 'strict-dynamic' ignorano l'origine https:
nell'esempio; è solo un fallback per i browser meno recenti.
Esempio
L'esempio seguente mostra una CSP di esempio, insieme a una pagina HTML in cui è incorporata:
Esempio di Content Security Policy
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:;
Esempio di pagina 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 con lista consentita
Se hai configurato una CSP con lista consentita, consulta l'elenco dei domini di Google Maps. Ti consigliamo di consultare questo documento e le note di rilascio dell'API Maps JavaScript per rimanere aggiornato, e includere nella lista consentita eventuali nuovi domini di servizio, se necessario.
I siti web che caricano l'API Maps JavaScript da un dominio API di Google legacy (ad esempio maps.google.com) o da un dominio specifico della regione (ad esempio maps.google.fr) devono includere anche questi nomi di dominio nell'impostazione script-src della CSP, come mostrato nell'esempio seguente:
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:;