Guide sur la Content Security Policy

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

Nous vous recommandons d'utiliser une CSP stricte plutôt qu'une CSP par liste d'autorisation pour réduire le risque d'attaques de sécurité. 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.

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:;