Włączyłeś certyfikat SSL, sklep otwiera się pod adresem HTTPS, a mimo to przeglądarka zgłasza problem z bezpieczeństwem albo część elementów strony nie działa? Jedną z częstych przyczyn jest Mixed Content, czyli mieszana zawartość.
Problem pojawia się wtedy, gdy strona sklepu działa przez HTTPS, ale próbuje pobrać część zasobów przez niezabezpieczony protokół HTTP. Może chodzić między innymi o zdjęcia produktów, arkusze CSS, skrypty JavaScript, fonty, iframe’y czy elementy dodane przez zewnętrzne moduły.
W tym poradniku pokażemy Ci, jak rozpoznać Mixed Content w PrestaShop, gdzie szukać jego źródła i jak poprawnie przejść na HTTPS w całym sklepie.
Co to jest Mixed Content?
Mixed Content występuje wtedy, gdy dokument został otwarty przez bezpieczne połączenie HTTPS, ale znajdują się w nim odwołania do zasobów pobieranych przez HTTP. Przykładem może być strona:
https://twojsklep.pl/kategoria/butyktóra próbuje wyświetlić zdjęcie znajdujące się pod adresem:
http://twojsklep.pl/img/buty.jpgDla przeglądarki oznacza to, że część witryny jest dostarczana bez zabezpieczenia. Zgodnie z aktualnymi zasadami działania przeglądarek część takich zasobów może zostać automatycznie przełączona na HTTPS, natomiast bardziej wrażliwe elementy, takie jak skrypty, arkusze stylów, iframe’y czy żądania wykonywane przez JavaScript, mogą zostać całkowicie zablokowane. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej Mixed Content.
W sklepie internetowym skutki mogą być poważniejsze niż brak jednej grafiki. Niepoprawnie załadowany skrypt może wpłynąć na działanie menu, formularza, koszyka, płatności, systemu analitycznego czy modułu integrującego sklep z zewnętrzną usługą.
Skąd bierze się Mixed Content w PrestaShop?
Mixed Content często pojawia się po wdrożeniu certyfikatu SSL w istniejącym sklepie. Sklep przez miesiące lub lata mógł działać pod HTTP, dlatego w bazie danych, szablonie lub konfiguracji modułów pozostały stare adresy zaczynające się od http://.
Problem może również pojawić się po instalacji nowego modułu albo zmianie szablonu. Rozszerzenie może pobierać zasoby z zewnętrznego serwera, który nie obsługuje HTTPS, albo mieć zapisany na stałe adres HTTP.
- adresy grafik wpisane ręcznie w opisach produktów i kategorii,
- logo, bannery oraz grafiki szablonu odwołujące się do HTTP,
- zewnętrzne fonty i arkusze CSS,
- skrypty JavaScript ładowane z niezabezpieczonego adresu,
- iframe’y z filmami, mapami lub innymi widgetami,
- moduły płatności, marketingowe i analityczne,
- stare adresy zapisane w bazie danych,
- własne modyfikacje plików motywu.
Dlatego samo zainstalowanie certyfikatu SSL nie zawsze kończy migrację sklepu do HTTPS. Trzeba jeszcze upewnić się, że cały sklep korzysta z bezpiecznych adresów.
Jak poprawnie włączyć HTTPS w PrestaShop?
Zanim zaczniesz szukać pojedynczych adresów HTTP, sprawdź podstawową konfigurację sklepu. Certyfikat SSL powinien być poprawnie zainstalowany dla domeny, a następnie obsługa SSL musi zostać aktywowana również w PrestaShop.
W zależności od wersji PrestaShop nazwy pozycji w panelu mogą się nieznacznie różnić. W aktualnych wersjach ustawień szukaj w sekcji dotyczącej parametrów/preferencji lub ustawień sklepu → Ogólne. Następnie:
- upewnij się, że certyfikat SSL działa dla domeny sklepu,
- włącz obsługę SSL w PrestaShop,
- aktywuj opcję wymuszającą SSL na wszystkich stronach sklepu,
- zapisz ustawienia,
- sprawdź stronę główną, produkty, kategorie, konto klienta i koszyk.
PrestaShop udostępnia osobne ustawienie pozwalające korzystać z SSL w całym sklepie, a nie tylko na stronach konta i procesu zakupowego. Szczegóły znajdziesz również w instrukcji włączenia HTTPS w PrestaShop.
Jeżeli korzystasz z hostingu cyber_Folks, możesz dodatkowo ustawić przekierowanie ruchu z HTTP do HTTPS po stronie hostingu. Pamiętaj jednak, że PrestaShop ma własną konfigurację SSL, dlatego najpierw poprawnie skonfiguruj HTTPS w sklepie, a dopiero potem sprawdź przekierowania. Pozwoli to ograniczyć ryzyko pętli przekierowań i problemów z zapleczem.
Jak znaleźć Mixed Content w sklepie?
Najprostszym narzędziem diagnostycznym jest sama przeglądarka. Otwórz stronę, na której pojawia się problem, a następnie uruchom narzędzia deweloperskie. W Chrome możesz zrobić to klawiszem F12 lub przez menu Więcej narzędzi → Narzędzia dla deweloperów.
Sprawdź konsolę przeglądarki
Przejdź do zakładki Console. Jeżeli strona zawiera Mixed Content, zobaczysz komunikat wskazujący zasób pobierany przez HTTP. Dzięki temu możesz ustalić nie tylko rodzaj problematycznego pliku, ale zwykle również jego dokładny adres.
Mixed Content: The page at 'https://twojsklep.pl/...' was loaded over HTTPS,
but requested an insecure resource 'http://twojsklep.pl/...'Sprawdź zakładkę Network
Pomocna jest również zakładka Network. Odśwież stronę i sprawdź, skąd pobierane są obrazy, skrypty, fonty oraz arkusze CSS. Jeżeli znajdziesz żądanie rozpoczynające się od http://, ustal, który element sklepu je generuje.
Nie ograniczaj testu do strony głównej. Błąd może występować wyłącznie na konkretnym produkcie, kategorii, stronie producenta albo w koszyku. Szczególną uwagę zwróć na podstrony zawierające starsze opisy i elementy wprowadzone ręcznie przez edytor.
Jak usunąć Mixed Content w PrestaShop?
Kiedy znasz już adres powodujący problem, nie chodzi o samo ukrycie komunikatu przeglądarki. Najlepiej usunąć jego źródło i sprawić, aby dany zasób był rzeczywiście dostępny przez HTTPS.
Zamień adresy HTTP na HTTPS
Jeżeli zasób znajduje się na Twojej domenie i działa również przez HTTPS, zmień odwołanie:
http://twojsklep.pl/img/produkt.jpgna:
https://twojsklep.pl/img/produkt.jpgJeśli aplikacja pozwala korzystać z adresów względnych, często jeszcze lepszym rozwiązaniem będzie odwołanie bez wpisywania protokołu i domeny, np. /img/produkt.jpg.
Sprawdź opisy produktów i kategorii
Stary adres HTTP może być zapisany bezpośrednio w treści produktu. Dzieje się tak szczególnie wtedy, gdy opis został skopiowany z innej strony albo przygotowany jeszcze przed wdrożeniem HTTPS.
Sprawdź kod HTML opisu oraz pola tworzone przez moduły do budowania dodatkowych sekcji produktowych. Szukaj przede wszystkim ciągu http://.
Sprawdź motyw i moduły
Jeżeli problem dotyczy wielu podstron jednocześnie, jego źródłem może być szablon lub moduł. Adres HTTP może znajdować się w pliku CSS, JavaScript, pliku szablonu albo ustawieniach konkretnego dodatku.
Przykładowo moduł może pobierać z zewnętrznego serwera font, bibliotekę JavaScript albo grafikę. W takiej sytuacji sprawdź, czy dostawca zasobu oferuje wersję HTTPS. Jeżeli nie, warto zastąpić źródło bezpiecznym odpowiednikiem albo zrezygnować z jego używania.
Sprawdź bazę danych
Przy starszych lub rozbudowanych sklepach odwołania HTTP mogą znajdować się w bazie danych. Dotyczy to szczególnie opisów, ustawień modułów i treści tworzonych przez dodatkowe edytory.
Przed wykonywaniem masowej zamiany adresów koniecznie wykonaj kopię zapasową bazy. Prosta operacja typu „zamień wszystkie http na https” może zmienić również adresy, których nie powinieneś modyfikować. Bezpieczniej jest najpierw wyszukać konkretne wystąpienia, ustalić ich przeznaczenie i dopiero wtedy wprowadzić zmiany.
Jeżeli Twój sklep utrzymujesz na hostingu PrestaShop w cyber_Folks, masz również dostęp do kopii zapasowych przechowywanych do 28 dni, co może być szczególnie przydatne przed zmianami w plikach lub bazie sklepu.
Mixed Content po migracji, zmianie domeny lub instalacji modułu
Sklep może działać poprawnie przez wiele miesięcy, a Mixed Content pojawi się dopiero po konkretnej zmianie. Dlatego warto wiedzieć, kiedy wykonać ponowny test.
- po migracji sklepu na inny serwer,
- po zmianie domeny lub subdomeny,
- po wdrożeniu certyfikatu SSL,
- po zmianie szablonu,
- po instalacji lub aktualizacji modułu,
- po dodaniu nowego systemu płatności lub analityki,
- po ręcznych zmianach w plikach motywu,
- po imporcie opisów produktów z zewnętrznego źródła.
Po zmianach wyczyść także pamięć podręczną sklepu. Jeżeli korzystasz z dodatkowych mechanizmów cache, usuń również zapisane przez nie wersje stron. W przeciwnym razie możesz przez pewien czas widzieć stary kod, mimo że źródło błędu zostało już poprawione.
Na hostingu dla PrestaShop w cyber_Folks dostępne są rozwiązania przygotowane pod ten system, między innymi LiteSpeed Cache, Redis, dyski NVMe i HTTP/3. Dostępny jest również moduł cyber_Boost, który pomaga optymalizować ustawienia, bazę i obrazy sklepu.
Jeśli chcesz dowiedzieć się więcej o jego działaniu, przeczytaj także poradnik PrestaShop z cyber_Boost – co to jest i dlaczego warto go włączyć?.
Jak zapobiegać Mixed Content w przyszłości?
Najłatwiej naprawić Mixed Content zanim klient zauważy problem. Po wdrożeniu HTTPS przyjmij prostą zasadę: nowe zasoby dodawane do sklepu powinny być dostępne przez HTTPS od samego początku.
- nie wpisuj ręcznie adresów
http://w opisach produktów i stron CMS, - korzystaj z HTTPS przy dodawaniu zewnętrznych skryptów, fontów i grafik,
- po instalacji nowych modułów sprawdzaj konsolę przeglądarki,
- testuj najważniejsze ścieżki zakupowe po aktualizacji sklepu,
- przed większymi zmianami wykonuj kopię zapasową,
- po migracji zweryfikuj ustawienia domeny, SSL i przekierowań,
- kontroluj kilka różnych typów podstron, a nie tylko stronę główną.
W bardziej zaawansowanych konfiguracjach można również wykorzystać nagłówek Content Security Policy z dyrektywą upgrade-insecure-requests, która informuje przeglądarkę, aby próbowała zamieniać niezabezpieczone żądania na HTTPS. Nie powinno to jednak zastępować poprawienia błędnych adresów w samym sklepie. Jeżeli zewnętrzny serwer nie obsługuje HTTPS, automatyczna zamiana protokołu nie rozwiąże problemu.
Mixed Content w PrestaShop – o czym musisz pamiętać?
Jeżeli sklep działa przez HTTPS, wszystkie jego istotne zasoby również powinny być pobierane bezpiecznym połączeniem. Jedno odwołanie do starego adresu HTTP może spowodować ostrzeżenie albo zablokowanie elementu strony przez przeglądarkę.
W przypadku PrestaShop zacznij od poprawnej konfiguracji SSL dla całej witryny. Następnie sprawdź konsolę przeglądarki i poszukaj starych adresów HTTP w opisach produktów, bazie danych, szablonie oraz modułach. Po zmianach wyczyść cache i ponownie przetestuj najważniejsze podstrony sklepu.
Prowadzisz sklep na PrestaShop? Wybierz środowisko przygotowane pod wymagania e-commerce i zadbaj jednocześnie o szybkość, bezpieczeństwo oraz kopie zapasowe sklepu.
FAQ – Mixed Content w PrestaShop
Mixed Content oznacza, że strona sklepu otwiera się przez HTTPS, ale co najmniej jeden zasób, np. obraz, skrypt, arkusz CSS, font lub iframe, jest pobierany przez niezabezpieczony protokół HTTP.
Nie zawsze. Certyfikat umożliwia korzystanie z HTTPS, ale w kodzie, bazie danych, opisach produktów, szablonie lub modułach nadal mogą znajdować się adresy HTTP. Trzeba je odnaleźć i poprawić.
Otwórz narzędzia deweloperskie przeglądarki i sprawdź zakładkę Console. Komunikat Mixed Content zwykle pokazuje dokładny adres zasobu pobieranego przez HTTP.
Technicznie jest to możliwe, ale masowa zamiana w bazie wymaga ostrożności. Najpierw wykonaj kopię zapasową i sprawdź, czy wszystkie wskazane zasoby rzeczywiście działają przez HTTPS.
Tak. Przeglądarki mogą blokować niezabezpieczone skrypty, arkusze stylów, iframe’y i inne zasoby. W efekcie niektóre funkcje strony lub modułów mogą przestać działać poprawnie.
Tak, warto wyczyścić pamięć podręczną PrestaShop oraz dodatkowe mechanizmy cache. Dzięki temu sklep wygeneruje strony ponownie z poprawionymi adresami HTTPS.
Czy w przypadku dużego sklepu na PrestaShop lepiej najpierw ręcznie wyszukiwać adresy HTTP w konsoli przeglądarki, czy warto wykorzystać narzędzia, które automatycznie skanują cały sklep pod kątem Mixed Content?
Przy dużym sklepie najlepiej połączyć obie metody. Automatyczny skaner pomoże szybko znaleźć adresy HTTP w wielu podstronach, a Console i Network pozwolą dokładnie sprawdzić źródło problemu. Po poprawkach warto wykonać ponowny skan i ręcznie przetestować najważniejsze elementy sklepu.