Dieses Dokument enthält Empfehlungen zur Konfiguration der Content Security Policy (CSP) der Website für die Maps JavaScript API. Da Endnutzer viele verschiedene Browsertypen und ‑versionen verwenden, sollten Entwickler dieses Beispiel als Referenz verwenden und Anpassungen vornehmen, bis keine Verstöße gegen die CSP mehr vorliegen.
Weitere Informationen zur Content Security Policy.
Strikte CSP
Um Ihre Website vor Cross-Site-Scripting-Angriffen (XSS) zu schützen, empfehlen wir die Verwendung einer strikten CSP anstelle einer CSP mit Zulassungsliste. Die Maps JavaScript API unterstützt die Verwendung einer strikten CSP, die auf Nonce-Werten beruht. Sowohl für das script- als auch das style-Element einer Website muss ein Nonce-Wert angegeben werden. Die Maps JavaScript API sucht intern nach dem ersten solchen Element und wendet seinen Nonce-Wert auf Stil- oder Scriptelemente an, die vom API-Script eingefügt wurden.
Mit dem 'strict-dynamic' Schlüsselwort im folgenden Beispiel kann ein Script mit
einer gültigen Nonce andere Scripts laden. Da die Maps JavaScript API mit einer Nonce geladen wird, kann die API die zusätzlichen benötigten Scripts laden. Sie müssen also keine Google-Domains in script-src auflisten. Browser, die 'strict-dynamic' unterstützen, ignorieren die https:
Quelle im Beispiel. Sie ist nur ein Fallback für ältere Browser.
Beispiel
Das folgende Beispiel zeigt eine Beispiel-CSP sowie eine HTML-Seite, in die die CSP eingebettet ist:
Beispiel-CSP
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:;
Beispiel-HTML-Seite
<!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 mit Zulassungsliste
Wenn Sie eine CSP mit Zulassungsliste eingerichtet haben, verwenden Sie bitte die Liste der Google Maps-Domains. Sie sollten diese Liste und die Versionshinweise für die Maps JavaScript API regelmäßig prüfen, um auf dem neuesten Stand zu bleiben, und die Domains neuer Dienste bei Bedarf in die Zulassungsliste aufnehmen.
Auch für Websites, die die Maps JavaScript API über eine alte Google APIs-Domain (z. B. maps.google.com) oder eine regionsspezifische Domain (z. B. maps.google.fr) laden, müssen diese Domainnamen in die Einstellung script-src der CSP aufgenommen werden, wie im folgenden Beispiel gezeigt:
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:;