TL;DR
Tabela na CSS Grid wyglądała dobrze po kliknięciu w menu, a po odświeżeniu strony rozsypywała się w jedną długą kolumnę. Winowajcą okazała się ścisła Content Security Policy z nonce: przy `style-src 'self' 'nonce-…'` przeglądarka odrzuca każdy atrybut `style` przysłany w HTML-u z serwera, więc `` ginie przy hydracji. Podczas nawigacji po stronie React ustawia style przez CSSOM, a to CSP przepuszcza. Stąd efekt „działa, ale tylko czasem”.
Autor zestawia cztery wyjścia: statyczne klasy CSS, ustawianie stylu przez CSSOM, tag `` z nonce i osobny stylesheet per route. Każde ma swoją cenę, a jeden z pomysłów psuje się przy nawigacji, bo nonce zmienia się z każdym requestem. Błąd długo żył na produkcji, bo na dev CSP było wyłączone. Jeśli wdrażasz CSP po audycie bezpieczeństwa, warto zobaczyć, którą pułapkę da się obejść najtaniej.
Content Security Policy to obecnie jedna z pierwszych rzeczy, które sprawdza audyt bezpieczeństwa aplikacji internetowej. To świetna ochrona przed atakami XSS, ale potrafi też zeps...
Czytaj cały wpis u źródła
