Este documento mostra recomendações para configurar a Política de Segurança de Conteúdo (CSP) do site para a API Maps JavaScript. Como diversos tipos e versões de navegadores são usados pelos usuários finais, recomendamos que os desenvolvedores tenham este exemplo como referência e façam ajustes até que não haja mais violações de CSP.
Saiba mais sobre a Política de Segurança de Conteúdo.
CSP rigorosa
Recomendamos o uso de uma CSP rigorosa, em vez da CSP da lista de permissões, para reduzir a possibilidade de ataques de segurança.
A API Maps JavaScript é compatível com o uso de CSPs rigorosas com base em valor de uso único.
Os sites precisam preencher os elementos script e style com um valor de uso único.
Internamente, a API Maps JavaScript vai encontrar o primeiro desses elementos e aplicar o valor de uso único a elementos de estilo ou de script inseridos pelo script da API, respectivamente.
Exemplo
Confira a seguir um exemplo de CSP junto com uma página HTML em que a política está incorporada:
Exemplo de Política de Segurança de Conteúdo
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:;
Exemplo 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 da lista de permissões
Se você configurou a CSP da lista de permissões, consulte a lista de domínios do Google Maps. Recomendamos consultar este documento e as notas da versão da API Maps JavaScript para se manter atualizado e incluir qualquer novo domínio de serviço na lista de permissões, se necessário.
Os sites que carregam a API Maps JavaScript de um domínio legado das APIs do Google (por exemplo, maps.google.com) ou de um domínio específico da região (por exemplo, maps.google.fr) também precisam incluir esses nomes de domínio na configuração da CSP script-src, como mostrado no exemplo a seguir:
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:;