Pokud máte na svém webu nastavený SSL certifikát pro zabezpečenou komunikaci mezi Vaším webem a prohlížečem návštěvníka Vašeho webu (komunikace za pomoci protokolu https) můžete narazit na problém “smíšeného obsahu” (tzv. “Mixed Content”). Tento problém následně způsobí “neúplné zabezpečení” Vaší stránky, které je navíc umocněno zobrazením upozornění na tuto chybu přímo v prohlížeči návštěvníka Vašeho webu.
Jak prohlížeče zobrazují “neúplně zabezpečené” weby?
Každý prohlížeč zobrazí chybu v zabezpečení jinak, viz tabulka:
Mimo to je po rozkliknutí informace o SSL certifikátu zobrazena výstraha:
Jak “smíšený obsah” vzniká
Příčinou vzniku chyby typu “mixed content” na webové stránce je stahování obsahu do webové stránky, která je zabezpečena SSL certifikátem a běží na protokolu https, z jiných webových stránek za pomocí nezabezpečeného protokolu http.
Nejčastěji se jedná o stahované obrázky, scripty, fonty, reklamní banery atd. umístěné na externích webech, které nejsou zabezpečené SSL certifikátem.
Důvodem zvýraznění této chyby je možnost “napadení” takto stahovaného “nezabezpečeného” obsahu a následné zobrazení podvodného obsahu návštěvníkům stránky.
Příklady “Mixed Content”
Chybu většinou způsobují externí obrázky, které se do webu dotahují z externího zdroje, který nepodporuje https protokol:
http://www.nejakadomena.cz/img/obrazek.jpg„>
Může se ale jednat i o externí scripty
Popřípadě i další elementy HTML kódu
- @import url(http://www.nejakadomena.cz/css?family=Noto+Sans:400,700,400italic,700italic&subset=latin,latin-ext);
Jak ve stránce běžící na https odhalit “Mixed Content” obsah
K odhalení místa výskytu chyby “Mixed Content” si stačí v prohlížeči otevřít tzv. “vývojářskou konzoli”. Klávesové zkratky jsou následující.
Jakmile se vývojářská konzole zobrazí, je nejprve dobré podívat se na informaci o chybě.
Příklad zobrazeného textu:
Mixed Content: The page at ‚https://www.nasedomena.cz/‘ was loaded over HTTPS, but requested an insecure image ‚http://www.nejakadomena.cz/img/obrazek.png‘. This content should also be served over HTTPS.
Vidíme, že chybou je opravdu “Mixed Content” a že problémovým prvkem je obrázek http://www.nejakadomena.cz/img/obrazek.png, který by jsme pro odstranění chyby měli nahradit obrázkem, který je stahovaný z externího webu přes zabezpečený protokol https.
Lokalizace a oprava chybného prvku
Lokalizace chybného prvku
Pokud chceme chybu “Mixed Content” opravit, je dobré nejdříve chybný prvek lokalizovat. K tomuto účelu můžeme využít již zmíněnou vývojářskou konzoli.
Zobrazíme si tedy vývojářskou konzoli ( Ctrl + Shift + I ), následně v ní zvolíme položku “Elements”. Nyní se nám zobrazí celkový přehled HTML kódu dané stránky. Klikneme do zobrazeného HTML kódu a následně klávesovou zkratkou Ctrl + F vyvoláme pole pro vyhledávání. Do tohoto pole následně zadáme URL adresu chybného elementu (v našem příkladu http://www.nejakadomena.cz/img/obrazek.png . Jakmile prvek vyhledáme, můžeme si na něj v zobrazeném HTML kódu najet myší a prvek se nám v náhledu stránky barevně zvýrazní.
Oprava chybného prvku
Jakmile jsme ve stránce chybný prvek identifikovali zbývá jej už jen opravit. Jediným způsobem, jak se zbavit “Mixed Content” chyby je náhrada chybných prvků za prvky, které jsou do stránky dotahovány za pomocí zabezpečeného protokolu https.
Ve většině případů, pokud stránka ze které je obsah stahovaný podporuje https, stačí provést pouze úpravu URL adresy prvku z http na https. Například tedy úprava adresy http://www.nejakadomena.cz/img/obrazek.png na https://www.nejakadomena.cz/img/obrazek.png .
Pokud stránka, ze které je obsah stahován https protokol nepodporuje, je zapotřebí stahovaný obsah pro správné fungování https ze stránky odstranit.
Na co je potřeba dát si u “Mixed Content” chyb pozor
Je zapotřebí si uvědomit, že chyba “Mixed Content” je závislá od obsahu dané zobrazené stránky. Z toho vyplývá, že pro 100% funkčnost stránek na https protokolu je zapotřebí zkontrolovat všechny stránky webu na tuto chybu.
Příklad:
Na stránce https://www.nasedomena.cz/home máme vložený reklamní banner sponzora, který si dotahuje obrázek z adresy http://www.nejakadomena.cz/img/obrazek.png. Stejný reklamní banner máme také vložený na stránce https://www.nasedomena.cz/podporuji-nas.
Na stránce https://www.nasedomena.cz/home odhalíme chybu “Mixed Content” a upravíme reklamní banner sponzora tak, že si dotahuje obrázek z adresy https://www.nejakadomena.cz/img/obrazek.png (předpokládejme, že jeho web podporuje https). Na stránce https://www.nasedomena.cz/home tedy chybu “Mixed Content” opravíme a bude se zobrazovat jako validní.
Pokud ale zapomeneme na opravu banneru i na stránce https://www.nasedomena.cz/podporuji-nas , bude se tato stránka do doby, než ji opravíme zobrazovat s chybou “Mixed Content”.
