Widget a Content-Security-Policy: co trzeba dopuścić

Jeśli strona ma ustawioną CSP, czat może po cichu się nie załadować. Wyjaśniamy, jakich dyrektyw potrzebuje widget i dlaczego obejdzie się bez unsafe-inline.

Content-Security-Policy to nagłówek, w którym strona mówi przeglądarce, skąd wolno ładować skrypty, style i dane. To przydatna, ale bezwzględna ochrona: wszystko, czego jawnie nie dopuszczono, przeglądarka blokuje — i to bez widocznego błędu na stronie. Dlatego na stronach z CSP najczęstsza skarga brzmi: „wkleiliśmy kod, a przycisku czatu nie ma”.

Trzy dyrektywy dla widgetu

Widget ładuje skrypt, podłącza własne style i wymienia wiadomości z serwerem. Domena Webchatix musi więc znaleźć się w trzech dyrektywach:

• script-src — żeby załadował się sam skrypt;
• style-src — dla pliku z wyglądem czatu;
• connect-src — do wysyłania i odbierania wiadomości.

Jeśli w czacie przesyłane są obrazy, dodaj tę samą domenę także do img-src: podglądy zdjęć ładują się z naszego serwera. Dokładną postać snippetu i listę dyrektyw znajdziesz w sekcji „Widżet na stronie” dokumentacji.

Dlaczego unsafe-inline nie jest potrzebne

Wcześniej widget wstawiał style prosto do strony znacznikiem <style>, więc strony z surową polityką musiały trzymać w style-src wyjątek 'unsafe-inline'. Hash ani nonce nic tu nie dawały: widget aktualizuje się sam, więc hash zmieniałby się z każdą wersją. Teraz wygląd leży w osobnym pliku na naszej domenie — wystarczy dopuścić domenę, bez żadnych wyjątków dla stylów inline.

Jeśli polityka jest stara

Zdarza się, że domena jest już wpisana w script-src i connect-src, ale brakuje jej w style-src. Dla takich stron widget ma plan awaryjny: jeśli style inline są na stronie dozwolone, pobiera ten sam plik z wyglądem i wstawia go sam. Czat wygląda wtedy normalnie, ale lepiej mimo wszystko dopisać domenę do style-src.

Druga strona medalu: dozwolone domeny

CSP chroni twoją stronę, a pole Allowed origins (CORS) w ustawieniach strony chroni twój czat: decyduje, z jakich adresów widget w ogóle przyjmie połączenie. Gwiazdkę * wygodnie zostawić na czas testów, ale na produkcyjnej stronie lepiej wypisać swoje domeny po przecinku. O tym i o innych zabezpieczeniach przeczytasz w sekcji „Bezpieczeństwo i GDPR”.

Jak sprawdzić w minutę

Otwórz stronę z widgetem, a potem konsolę deweloperską (F12). Jeśli CSP coś zablokowała, zobaczysz tam komunikat z nazwą dyrektywy — to ją trzeba uzupełnić. Przycisku nie ma, a w konsoli czysto? Sprawdź, czy klucz strony w snippecie zgadza się z kluczem w panelu i czy domena jest na liście dozwolonych; te punkty są też w FAQ. Nie pomogło — napisz do nas i dołącz nagłówek CSP swojej strony.