W tym dokumencie znajdziesz zalecenia dotyczące konfigurowania standardu Content Security Policy (CSP) witryny na potrzeby interfejsu Maps JavaScript API. Użytkownicy korzystają z wielu różnych typów i wersji przeglądarek, dlatego zachęcamy deweloperów do korzystania z tego przykładu jako punktu odniesienia i do jego dostosowywania, dopóki nie wystąpią żadne naruszenia CSP.
Więcej informacji o standardzie Content Security Policy.
Rygorystyczny CSP
Aby chronić witrynę przed atakami typu cross-site scripting (XSS), zalecamy używanie rygorystycznego CSP zamiast an allowlist CSP. Interfejs Maps JavaScript API obsługuje używanie rygorystycznego CSP opartego na liczbach jednorazowych. Witryny muszą wypełniać elementy script i style wartością liczby jednorazowej. Wewnętrznie interfejs Maps JavaScript API znajdzie pierwszy taki element i zastosuje jego wartość liczby jednorazowej odpowiednio do elementów stylu lub skryptu wstawionych przez skrypt interfejsu API.
Słowo kluczowe 'strict-dynamic' w poniższym przykładzie umożliwia skryptowi z
prawidłową liczbą jednorazową wczytywanie innych skryptów. Ponieważ strona wczytuje interfejs Maps JavaScript API z liczbą jednorazową, interfejs API może wczytywać dodatkowe skrypty, których potrzebuje, więc nie musisz wymieniać żadnych domen Google w script-src. Przeglądarki, które obsługują 'strict-dynamic', ignorują źródło https:
w przykładzie. Jest to tylko rezerwa dla starszych przeglądarek.
Przykład
Poniższy przykład przedstawia przykładowy CSP wraz ze stroną HTML, na której jest on osadzony:
Przykładowy standard 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:;
Przykładowa strona 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 oparty na liście dozwolonych
Jeśli masz skonfigurowany CSP oparty na liście dozwolonych, zapoznaj się z listą domen Map Google. Aby być na bieżąco, zalecamy zapoznanie się z tym dokumentem i informacjami o wersji interfejsu Maps JavaScript API release notes oraz w razie potrzeby dodanie do listy dozwolonych każdej nowej domeny usługi.
Witryny, które wczytują Maps JavaScript API z starszej domeny interfejsów API Google (np. maps.google.com) lub domeny specyficznej dla regionu (np. maps.google.fr), muszą też uwzględniać te nazwy domen w ustawieniu script-src CSP, jak pokazano w tym przykładzie:
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:;