Виджет и Content-Security-Policy: что разрешить

Если на сайте настроена CSP, чат может молча не загрузиться. Разбираем, какие директивы нужны виджету и почему без unsafe-inline.

Content-Security-Policy — заголовок, которым сайт говорит браузеру, откуда можно грузить скрипты, стили и данные. Защита полезная, но строгая: всё, что не разрешено явно, браузер блокирует, причём без видимой ошибки на странице. Поэтому самая частая жалоба на сайтах с CSP звучит так: «вставили код, а кнопки чата нет».

Три директивы для виджета

Виджет загружает скрипт, подключает своё оформление и обменивается сообщениями с сервером. Значит, домен Webchatix должен быть в трёх директивах:

• script-src — чтобы загрузился сам скрипт;
• style-src — для файла с оформлением чата;
• connect-src — для отправки и получения сообщений.

Если в чате обмениваются картинками, добавьте тот же домен и в img-src: превью изображений грузятся с нашего сервера. Точный вид сниппета и список директив — в разделе «Виджет на сайте» документации.

Почему не нужен unsafe-inline

Раньше виджет вставлял стили прямо в страницу тегом <style>, и сайтам со строгой политикой приходилось держать в style-src разрешение 'unsafe-inline'. Хеш или nonce тут не помогали: виджет обновляется сам, и хеш менялся бы с каждой версией. Теперь оформление лежит отдельным файлом на нашем домене — достаточно разрешить домен, и никаких инлайн-исключений.

Если политика старая

Бывает, что домен уже прописан в script-src и connect-src, а в style-src его нет. Для таких сайтов у виджета есть запасной путь: если инлайн-стили на странице разрешены, он забирает тот же файл оформления и вставляет его сам. Чат при этом выглядит как обычно, но правильнее всё же добавить домен в style-src.

Обратная сторона: разрешённые домены

CSP защищает ваш сайт, а поле Allowed origins (CORS) в настройках сайта защищает ваш чат: оно определяет, с каких адресов виджет вообще примет подключение. Звёздочку * удобно оставить на время тестов, но на рабочем сайте лучше перечислить свои домены через запятую. Об этом и о других мерах — в разделе «Безопасность и GDPR».

Как проверить за минуту

Откройте страницу с виджетом, затем консоль разработчика (F12). Если CSP что-то заблокировала, там будет сообщение с названием директивы — его и нужно дополнить. Нет кнопки, а в консоли чисто — проверьте, что ключ сайта в сниппете совпадает с ключом в панели, а домен входит в список разрешённых; эти пункты есть и в FAQ. Не помогло — напишите нам, приложив заголовок CSP вашего сайта.