В этом документе рассказывается, как настроить Content Security Policy (CSP) на сайте для Maps JavaScript API. Поскольку конечные пользователи работают с самыми разными типами и версиями браузеров, мы рекомендуем взять приведенные здесь примеры кода в качестве отправной точки и настраивать их до тех пор, пока не прекратят поступать ошибки о нарушении CSP.
Подробнее о Content Security Policy…
Строгие CSP
Чтобы защитить сайт от атак XSS (межсайтовый скриптинг), мы рекомендуем использовать строгие настройки CSP вместо белого списка CSP. Maps JavaScript API поддерживает применение строгих CSP на основе однократно используемых чисел (nonce). Ваш сайт должен подставлять nonce в элементы script и style. Maps JavaScript API найдет первый такой элемент и применит его nonce к остальным элементам style или script, добавленным скриптом API.
Ключевое слово 'strict-dynamic' в следующем примере позволяет скрипту с действительным nonce загружать другие скрипты. Поскольку ваша страница загружает Maps JavaScript API с помощью одноразового кода, API может загрузить дополнительные скрипты, которые ему нужны, поэтому вам не нужно указывать домены Google в script-src. Браузеры, поддерживающие 'strict-dynamic', игнорируют источник https:
в примере. Он предназначен только для более старых браузеров.
Пример
Ниже показан пример CSP вместе со страницей HTML, в которую он встроен.
Пример применения 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:;
Пример страницы 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 на основе белого списка
Если вы решите использовать CSP на основе белого списка, добавляйте в него все домены Google Карт. Мы рекомендуем периодически сверяться с документом по этой ссылке и примечаниями к выпуску Maps JavaScript API, чтобы при необходимости пополнять свой список новыми доменами сервиса.
Сайты, которые загружают Maps JavaScript API из устаревшего домена API Google (например, maps.google.com) или регионального домена (например, maps.google.fr), должны включать эти доменные имена в настройки CSP script-src, как показано в примере ниже.
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:;