Невозможно внедрить строгую политику безопасности контента с API карт Google

Я несколько раз получаю ошибку ниже в консоли инструмента разработчика chrome для файла common.js maps.googleapis.com-

common.js:15 
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com https://s3.amazonaws.com https://maxcdn.bootstrapcdn.com". Either the 'unsafe-inline' keyword, a hash ('sha256-mmA4m52ZWPKWAzDvKQbF7Qhx9VHCZ2pcEdC0f9Xn/Po='), or a nonce ('nonce-...') is required to enable inline execution.

Мне нужно использовать строгую политику CSP, поэтому я не могу использовать unsafe-inline или unsafe-eval, чтобы ослабить политику. Для поддержки строгой политики CSP встроенные стили и сценарии не допускаются. И кажется, что встроенные стили использовались в common.js API карты Google, из-за чего я получаю указанную выше ошибку.

Любое предложение?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
0
3 123
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Любое предложение?

Используйте токен 'nonce-value' в script-src и такой же в style-src. Если вы вызываете API GMaps с атрибутом nonce='value':

<script async defer src='//maps.googleapis.com/maps/api/js?key=<api_key_here>&callback=initMap' nonce='base64value'></script>

Скрипт API карт Google перераспределяет этот nonce='base64value' во все дочерние внешние скрипты и блоки встроенных стилей. Вы можете проверить это в демоверсии 'nonce' с картой Google, просто установите флажок 'nonce'.

Изменить 24-07-2021:

Я могу подтвердить, что:

  • GMap внес некоторые изменения и не перераспределяет nonce из тега скрипта в стили.
  • Обходной путь от Макса Виссера больше не работает на данный момент.

Поэтому, к сожалению, ответ таков: используйте «unsafe-inline» и подождите, пока Google реализует «nonce» для стилей.

На момент написания этого одного недостаточно. Вы по-прежнему получаете ошибки. Ответ Max Visors ниже работает.

Edd Aslin 23.07.2021 14:48

Нет, ответ Макса Визера ниже пока не работает. Взгляните, например, на Просмотр улиц.

granty 23.07.2021 22:25

Он может не работать для просмотра улиц, однако он работает для базовой карты. По крайней мере на данный момент!

Edd Aslin 25.07.2021 12:16

Кажется, ты прав. Но мне кажется странным, что это изменение в конце апреля привело к нарушениям CSP (поскольку это должно быть изменение только в том, откуда он извлекает одноразовый номер). Для нашего приложения это по крайней мере лучше, чем копирование всего CSS, поскольку нам нужно запустить действительно ограничительный CSP.

Max Visser 30.07.2021 16:26

Я добавил результаты вашего теста в качестве комментария к системе отслеживания проблем от команды GMaps. На данный момент (июль 2021 г.) они, похоже, еще не работают над официальной поддержкой CSP. Но, по крайней мере, теперь у них есть больше информации о том, что нужно исправить, когда они начнут над этим работать. Если кто-то обнаружит больше нарушений CSP, вероятно, будет разумно оставить комментарий в системе отслеживания проблем. issuetracker.google.com/issues/132600807

Max Visser 30.07.2021 16:38

Мне тоже это показалось странным, технически не имеет значения, откуда брать значение nonce. Но я не проводил полное тестирование поддержки одноразового номера для CSS, я просто случайно заметил, что скрипт GMaps использует свой одноразовый номер для стилей. Спасибо за комментарии к проблеме трекера, есть надежда, что гугл исправит.

granty 30.07.2021 19:46

В настоящее время карты Google требуют, чтобы у вас был unsafe-inline в вашем CSP для style-src. Для script-src это все еще работает.~~

Скорректирован тест упомянутого гранта CSPlite.com; На момент написания этого ответа тест говорит

В конце апреля 2021 года скрипт Google maps перестал передавать 'nonce-value' из родительского скрипта в блоки дочерних стилей <style>...</style>

Временное решение, которое я нашел, заключается в том, чтобы добавить все стили из Google Maps в наш сторонний код CSS. Таким образом, вы по-прежнему будете получать ошибку в консоли, но визуальные ошибки, возникающие из-за style-src блокировки встроенных стилей из карт Google, исчезнут. Метод, который мы использовали для этого, состоит в том, чтобы просто скопировать все встроенные стили, добавленные картами Google.

Если вы найдете этот ответ, а также хотите, чтобы Карты Google снова поддерживали распределение значений одноразового номера в свои блоки встроенного стиля, оставьте комментарий здесь.

Изменить 22-06-2021:

GMap пока официально не поддерживает одноразовые номера. Недавно произошло изменение, которое улучшило способность Maps JS обрабатывать отдельные одноразовые номера для сценариев и стилей. Теперь, если сайт не имеет одноразового номера в <style> или <link rel = "stylesheet">, это приводит к тому, что одноразовый номер не применяется к таблицам стилей Maps JS.

В качестве обходного пути ваш сайт может включать пустой <style> с предоставленным одноразовым номером, и GMaps JS подберет его.

Для меня решение было здесь: https://csplite.com/csp/test42/#styles_nonce_workaround

Добавление <style nonce='base64value'></style> сделало свою работу.

Другие вопросы по теме