Co to jest "mixed content" i jak go naprawić?

Mixed content to sytuacja, w której strona korzystająca z HTTPS ładuje zasoby przez HTTP. Grozi to przechwyceniem lub modyfikacją danych oraz wyświetlaniem ostrzeżeń przeglądarek.

Co to jest mixed content

Dotyczy sytuacji, w której zasoby takie jak obrazy, skrypty, arkusze stylów czy fonty są ładowane przez niezabezpieczone połączenie HTTP na stronie, która sama używa HTTPS.

Rodzaje mixed content

• Aktywny mixed content – zasoby wykonawcze, takie jak skrypty, iframe, AJAX, które mogą ingerować w stronę.
• Pasywny mixed content – zasoby nieinteraktywne, takie jak obrazy, fonty, wideo, style, które mogą być szpiegowane lub blokowane, ale nie zawsze modyfikują stronę.

Dlaczego to jest problem

• Grozi podsłuchiwaniem i modyfikacją danych przez osoby trzecie.
• Przeglądarki mogą wyświetlać ostrzeżenia lub blokować zasoby, co pogarsza doświadczenie użytkownika.
• Może prowadzić do utraty zaufania i niższych wyników w wyszukiwarkach.

Jak naprawić mixed content

1. Zidentyfikuj wszystkie zasoby ładowane przez HTTP na stronie HTTPS. Sprawdź źródła w źródle strony, konsoli przeglądarki i zakładce Sieć.
2. Zamień http:// na https:// w odnośnikach do zasobów lub użyj protokołu względnego // (np. //example.com/zasob).
3. Jeśli zasób zewnętrzny nie obsługuje HTTPS, rozważ hosting lokalny, skorzystanie z alternatywnego dostawcy lub całkowite wyłączenie zasobu.
4. Włącz politykę bezpieczeństwa Content Security Policy (CSP) i dodaj dyrektywę upgrade-insecure-requests, a także opcjonalnie block-all-mixed-content dla surowych zabezpieczeń.
5. Zweryfikuj wszystkie zasoby po migracji i przeprowadź testy regresji na kluczowych stronach.
6. Regularnie monitoruj stronę pod kątem nowych zasobów ładowanych przez HTTP i aktualizuj konfigurację CSP.

Praktyczne wskazówki i scenariusze

• Scenariusz: strona używa CDN z zasobami statycznymi. Upewnij się, że CDN obsługuje HTTPS i taguj zasoby jako https.
• Scenariusz: fonty z zewnętrznego źródła. Przenieś fonty na własny serwer z HTTPS albo użyj Google Fonts przez HTTPS.
• Scenariusz: skrypt analityczny z zewnętrznego serwisu. Sprawdź możliwość ładowania ten serwis wyłącznie przez HTTPS lub hostuj skrypt lokalnie, jeśli to konieczne.
• Prowadzenie auditów: uruchamiaj Lighthouse lub DevTools, by szybko zidentyfikować źródła mixed content.

Narzędzia do wykrywania i monitorowania

• Konsola deweloperska przeglądarki – wyszukaj ostrzeżenia o mixed content.
• Karta Sieć (Network) – sprawdź źródła żądań i protokoły (http/https).
• Lighthouse lub inne narzędzia audytowe – raporty o bezpieczeństwie i mieszanym ruchu.
• Testy ręczne po każdej zmianie – upewnij się, że wszystkie zasoby ładują się przez HTTPS.

Najczęstsze pułapki i błędy do uniknięcia

• Zapominanie o zasobach zewnętrznych, które są ładowane dynamicznie.
• Używanie protokołu względnego bez testów – //example.com może prowadzić do http, jeśli użytkownik otwiera stronę przez http.
• Niedostosowanie CSP – bez polisy upgrade-insecure-requests nie wszystkie zasoby zostaną automatycznie zaktualizowane.
• Wciąż otwarte błędy wstecznej kompatybilności – nie wszystkie starsze zasoby będą dostępne przez HTTPS.

Podsumowanie

• Mixed content to poważny problem bezpieczeństwa i UX.
• Najlepsze praktyki to migrowanie zasobów na HTTPS, użycie CSP z upgrade-insecure-requests i regularne monitorowanie zasobów.
• Dzięki temu strona pozostaje spójna, a użytkownicy mają bezpieczne i płynne doświadczenie.