Ten dokument zawiera zalecenia dotyczące konfigurowania polityki bezpieczeństwa treści (CSP) witryny na potrzeby interfejsu Maps JavaScript API. Użytkownicy korzystają z różnych typów i wersji przeglądarek, dlatego deweloperzy powinni używać tego przykładu jako punktu odniesienia i dostosowywać go, dopóki nie przestaną występować naruszenia zasad CSP.
Więcej informacji o (standard) Content Security Policy
Rygorystyczne zasady CSP
Aby chronić witrynę przed atakami typu cross-site scripting (XSS), zalecamy używanie rygorystycznych zasad CSP zamiast zasad CSP opartych na liście dozwolonych. Maps JavaScript API obsługuje rygorystyczne zasady CSP oparte na liczbie jednorazowej. 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 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 obsługujące dyrektywę 'strict-dynamic' ignorują źródło https: w przykładzie. Jest ono tylko rozwiązaniem zastępczym dla starszych przeglądarek.
Przykład
Poniższy przykład pokazuje przykładowe zasady CSP oraz stronę HTML, na której są one umieszczone:
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>
Dodawanie dostawcy usług dla twórców do listy dozwolonych
Jeśli masz skonfigurowaną listę dozwolonych CSP, zapoznaj się z listą domen Map Google. Zalecamy zapoznanie się z tym dokumentem i informacjami o wersji Maps JavaScript API, aby być na bieżąco i w razie potrzeby dodać nowe domeny usług do listy dozwolonych.
Witryny, które wczytują interfejs Maps JavaScript API ze starszej domeny interfejsów API Google (np. maps.google.com) lub domeny regionalnej (np. maps.google.fr), muszą też uwzględniać te nazwy domen w ustawieniu script-src CSP, jak 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:;