Віджет і 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 вашого сайту.