En este documento, se proporcionan recomendaciones para configurar la Política de Seguridad del Contenido (CSP) del sitio web para la API de Maps JavaScript. Dado que los usuarios finales usan una gran variedad de tipos y versiones de navegadores, se recomienda a los desarrolladores que usen este ejemplo como referencia y que realicen ajustes hasta que no se produzcan más incumplimientos de la CSP.
Obtén más información sobre la Política de Seguridad del Contenido.
CSP estricta
Para ayudar a proteger tu sitio web de ataques de secuencias de comandos entre sitios (XSS), te
recomendamos que uses una CSP estricta en lugar de
una CSP de lista de entidades permitidas. La API de Maps JavaScript admite el uso de una CSP estricta basada en nonce. Los sitios web deben propagar los elementos script y style con un valor nonce. De forma interna, la API de Maps JavaScript encontrará el primer elemento y aplicará su valor nonce a los elementos de diseño o de secuencia de comandos insertados por la secuencia de comandos de la API, respectivamente.
La palabra clave 'strict-dynamic' del siguiente ejemplo permite que una secuencia de comandos que tiene
un nonce válido cargue otras secuencias de comandos. Como tu página carga la API de Maps JavaScript con un nonce, la API puede cargar las secuencias de comandos adicionales que necesita, por lo que no es necesario que incluyas ningún dominio de Google en script-src. Los navegadores que admiten 'strict-dynamic' ignoran la fuente https:
en el ejemplo; solo es una alternativa para los navegadores anteriores.
Ejemplo
A continuación, se muestra una CSP de ejemplo, junto con una página HTML en la que está incorporada:
Ejemplo de Política de Seguridad del Contenido
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:;
Ejemplo de página 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 de lista de entidades permitidas
Si configuraste una CSP de lista de entidades permitidas, consulta la lista de dominios de Google Maps. Te recomendamos que consultes este documento y las notas de la versión de la API de Maps JavaScript para mantenerte al tanto y, en caso de ser necesario, incluir los dominios de servicio nuevos en la lista de entidades permitidas.
Los sitios web que cargan la API de Maps JavaScript desde un dominio heredado de las APIs de Google (por ejemplo, maps.google.com) o un dominio de una región específica (por ejemplo, maps.google.fr) también deben incluir estos nombres de dominio en la configuración script-src de la CSP, como se muestra en el siguiente ejemplo:
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:;