Ce document fournit des recommandations pour configurer la Content Security Policy (CSP) d'un site Web pour l'API Maps JavaScript. Étant donné que les utilisateurs finaux utilisent une grande variété de types et de versions de navigateur, nous encourageons les développeurs à utiliser cet exemple comme référence, en l'ajustant jusqu'à ce qu'aucun autre cas de non-respect des CSP ne se produise.
En savoir plus sur Content Security Policy.
CSP stricte
Pour protéger votre site Web contre les attaques de script intersites (XSS), nous
vous recommandons d'utiliser une CSP stricte plutôt qu'
une CSP par liste d'autorisation. L'API Maps JavaScript est compatible avec l'utilisation d'une CSP stricte basée sur des nonces. Les sites Web doivent renseigner les éléments script et style avec une valeur nonce. En interne, l'API Maps JavaScript trouve le premier élément de ce type et applique sa valeur nonce aux éléments "style" ou "script" insérés respectivement par le script de l'API.
Le mot clé 'strict-dynamic' de l'exemple suivant permet à un script disposant d'
un nonce valide de charger d'autres scripts. Étant donné que votre page charge l'API Maps JavaScript avec un nonce, l'API peut charger les scripts supplémentaires dont elle a besoin. Vous n'avez donc pas besoin de lister les domaines Google dans script-src. Les navigateurs compatibles avec 'strict-dynamic' ignorent la https:
source dans l'exemple. Il ne s'agit que d'une solution de secours pour les anciens navigateurs.
Exemple
Voici un exemple de CSP et de page HTML dans laquelle il est intégré :
Exemple de 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:;
Exemple de page 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 par liste d'autorisation
Si vous avez configuré une CSP par liste d'autorisation, veuillez consulter la liste des domaines Google Maps. Nous vous recommandons de vous tenir au courant régulièrement en consultant ce document et les notes de version de l'API Maps JavaScript, et d'inclure tout nouveau domaine du service dans la liste d'autorisation si nécessaire.
Les sites Web qui chargent l'API Maps JavaScript à partir d'un ancien domaine d'API Google (par exemple, maps.google.com) ou d'un domaine spécifique à une région (par exemple, maps.google.fr), doivent également inclure ces noms de domaine dans leur paramètre script-src CSP, comme illustré dans l'exemple suivant :
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:;