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