SSLmentor

Kvalitní TLS/SSL certifikáty pro webové stránky a internetové projekty.

Mixed Content

Mixed Content

Chybné zabezpečení s mixovaným obsahem

Nainstalovali jste si SSL certifikát a prohlížeč neukazuje zámeček zabezpečené webové stránky? Jedním z častých důvodů tohoto jevu je, že se na webu nachází tzv. Mixed Content nebo-li smíchaný obsah načítaný z nezabezpečené adresy s HTTP protokolem.

Ukázka zobrazení upozornění na Mixed Content v prohlížečích Chrome a Firefox.

Mixed content - zobrazení v prohlížečích

Co je to Mixed Content chyba

Zjednodušeně se jedná o stav, kdy je na zabezpečené webové stránce s adresou HTTPS načítán obsah ze zdrojů, které na bezpečném HTTPS protokolu neběží. Často se jedná o obsah z externího webu, což mohou být obrázky, skripty, reklamní bannery atd. Mohou to být ale i soubory webové stránky, kde je vložena napevno adresa HTTP.
Chybu Mixed Content způsobí například tento html zápis obrázku <img src="http://www.domenaxyz.cz/img/obrazek.jpg">.

Jak jednoduše zjistit Mixed Content v prohlížeči Chrome:

Jak zjistit chybné zabezpečení s mixovaným obsahem

Jak zjistit na stránkách s https Mixed Content obsah

Zjištění zda na stránce je mixed content (mixovaný obsah) je velice jednoduché. Prakticky všechny prohlížeče mají vývojářskou konzoli, která se spouští klinutím na klávesu F12. Chrome má i klávesovou zkratku CTRL+SHIFT+I.

Po spuštění Nástroje pro vývojáře se zobrazí okno s širokou nabídkou voleb, ale nás zajímá primárně záložka Console, která zobrazí chyby a varování. Zde jsou vypsány problémy, které na webové stránce nastaly. Jedna z hlášek může například znít následovně.

www.domenaxyz.cz/:21 Mixed Content: The page at 'https://www.domenaxyz.cz/mixedcontent/' was loaded over HTTPS, but requested an insecure image 'http://www.nejakadomena.cz/img/animated-dog.gif'. This content should also be served over HTTPS.
Ukázka Nástroje pro vývojáře s upozorněním na Mixed Content

Vývojářská konzole v Chrome zobrazí pro navštívenou stránku naráz všechny Mixed Content prvky načítané po HTTP protokolu.

Chrome - upozornění na Mixed Content

Jak vyřešit https Mixed Content obsah na webu

Manuální úprava odkazů

Pracnějším, ale nejvhodnějším řešením načítání smíšeného obsahu na běžném webhostingu je kontrola a kompletní úprava adres v kódu webové prezentace.

V případě načítání obsahu z jiných webů, je nutné upravit absolutní adresu odkazu na zabezpečený protokol HTTPS. To znamená přepsat text http://www... na https://www... Tato adresa ukazuje přímo na zdroj a ten musí být dostupný také z HTTPS. Pokud zdrojový web nemá https zabezpečení, měli bychom jej na to upozornit a rozhodně načítání zrušit.

Pokud se načítá obsah přímo na doméně, je vhodné upravit adresu na relativní (například src="/img/obrazek.jpg"), kde dojde k zabezpečenému načítání objektů automaticky.

Využití bezpečnostních hlaviček

Velmi elegantním způsobem je možné vyřešit Mixed Content pomocí bezpečnostní hlavičky CSP (Content Security Policy), která umožňuje "nařídit" prohlížeči, aby všechny zdroje (obrázky, scripty, ...) načítal pouze z https adres. Pokud zdroj není dostupný po https protokolu, prohlížeč jej zablokuje a nezobrazí.

Nastavení hlavičky se provádí v souboru .htaccess.

# CSP settings
Header set Content-Security-Policy "upgrade-insecure-requests;"

Bohužel bezpečnostní hlavička není funkční ve starším prohlížeči Internet Explorer. Návody a podrobnosti o nastavení hlaviček získáte na webu securityheaders.cz

Jak na Mixed Content u WordPressu

Při přechodu na HTTPS u populárního redakčního systému WordPress se často také stává, že jsou stránky označené jako nezabezpečené z důvodu https Mixed Contentu. Řešením je použití některého z pluginů. Pro jednoduché weby doporučujeme například plugin Really Simple SSL, který zajistí kompletní přesměrování na https komunikaci a není potřeba se o nic dále starat. Pokud nevyužíváte plugin a vše, včetně .htaccess, nastavujete ručně, budete muset stránky projít ručně a provést úpravy adres.
U obsáhlejších webových projektů je vhodné automatizovaně projít databázi a přepsat adresy, opět pomocí některého z WP pluginů.

WordPress - přechod http -> HTTPS

Máte webové stránky na WordPressu a potřebujete nastavit HTTPS? Návod naleznete v naší nápovědě Jak nastavit HTTPS na WordPress pomocí pluginu Really Simple SSL nebo úpravou souboru .htaccess.

Zpět na Nápovědu
Našli jste chybu nebo něčemu nerozumíte? Napište nám!

CA Sectigo
CA RapidSSL
CA Thawte
CA GeoTrust
CA DigiCert
CA Certum