Mixed content (kevert tartalom)

Biztonság

A titkosítatlan erőforrás megtámadható a hálózat bármely pontján. Egy közbeékelt fél lecserélheti a JavaScriptet, és a kód már a HTTPS-oldalon belülről fut. Innen látja a sütiket, a beírt jelszót, a bankkártya-mezőt. A CSP (Content-Security-Policy) és a HSTS (HTTP Strict Transport Security) pont ezt a rést zárja be, de csak akkor, ha egyáltalán bekapcsolod őket.

Működés

A blokkolt szkript néma hiba. A fejlesztő nem kap 500-as hibát, a felhasználó viszont azt látja, hogy nem nyílik a menü vagy nem küldhető el az űrlap. A magyar KKV-oldalak többségén ez egy régi plugin vagy egy beégetett külső hivatkozás miatt marad bent, évekig.

Bizalom és mérés

A böngésző a lakat helyett figyelmeztető ikont mutat. A Lighthouse Best Practices (böngészős jó gyakorlatok) audit külön pontot von le érte. Ha a blokkolt erőforrás analitikai szkript, hiányos lesz az adatod, és rossz számok alapján döntesz.

Vonatkozik rá

• Minden HTTPS-en futó oldal, kortól és mérettől függetlenül.
• Régi, HTTP-ről migrált oldalak, ahol a tartalomban maradtak abszolút http:// linkek.
• Webshopok külső szkriptekkel: fizetési modul, chat, hirdetési pixel, szállítmányozó widget.
• Oldalak, ahol a szerkesztők WYSIWYG-editorban illesztenek be külső képeket.

Kevésbé érinti

• Teljesen HTTP-n futó oldal: ott nincs mixed content, ott a HTTPS hiánya a probléma.
• Statikus generált oldalak, ahol minden erőforrás relatív útvonalon helyben van.

Staging és fejlesztés

A fejlesztői környezet gyakran HTTP-n fut, ott a hiba nem jelentkezik. Éles állásnál viszont azonnal előjön. Érdemes a stagingen is HTTPS-t használni, hogy a hiba ott derüljön ki.

1. Nyisd meg az oldalt Chrome-ban, és nyomj F12-t a devtools megnyitásához.
2. Menj a Console fülre, és tölts újra az oldalt Ctrl+F5-tel.
3. Keresd a Mixed Content: kezdetű sorokat. A böngésző kiírja a pontos erőforrás-URL-t.
4. Váltts a Network fülre, és szűrj a Protocol oszlop szerint. Ha nem látod az oszlopot, jobb klikk a fejlécen, és kapcsold be.
5. Kattints a címsor lakatjára. A „Kapcsolat nem biztonságos” vagy a figyelmeztető ikon azonnal jelzi a gondot.
6. Futtass Lighthouse auditot, és nézd meg a Best Practices szekciót.
7. Nagyobb oldalon a teljes HTML-t is átfésülheted: curl -s https://pelda.hu | grep -o 'http://[^"'\'' ]*'.

Jó jel

• A konzol tiszta, nincs Mixed Content üzenet.
• A lakat sértetlen, a Network fülön minden sor h2 vagy h3 protokollon fut.
• A forráskódban csak relatív (/kepek/logo.png) vagy https:// kezdetű hivatkozás van.

Rossz jel

• was loaded over HTTPS, but requested an insecure resource a konzolon.
• Eltűnt kép vagy nem működő gomb éles oldalon, miközben lokálisan jó.
• http:// hivatkozás az adatbázisban tárolt cikkszövegekben.
• Figyelmeztető ikon a címsorban lakat helyett.

WordPress

1. Beállítások > Általános: a WordPress-cím és a Webhely címe is https:// legyen.
2. Cseréld le a régi URL-eket az adatbázisban. WP-CLI-vel: wp search-replace 'http://pelda.hu' 'https://pelda.hu' --all-tables --precise.
3. Előtte készíts adatbázis-mentést. A soros cserét nem lehet visszavonni.
4. Nézd át a téma és a gyerektéma fájljait http:// hivatkozásokra.
5. Ürítsd a cache-t (plugin és CDN (tartalomszolgáltató hálózat) szinten is).
6. Utolsó mentsvárként upgrade-insecure-requests a CSP (Content-Security-Policy) fejlécben, de ez tüneti kezelés.

Shopify

1. A platform mindenhol HTTPS-t ad, így a hiba általában a témából vagy egy appból jön.
2. Online Store > Themes > Edit code: keress http:// mintát a .liquid fájlokban.
3. A termékleírásokban a HTML-nézetben ellenőrizd a beillesztett képeket.
4. Külső app szkriptjét a szolgáltatónál jelentsd, ha az tölt HTTP-t.

Unas

1. Az adminban a Design > Saját HTML/JS blokkokat nézd át elsőként.
2. A termék- és szövegoldalak forrásnézetében cseréld a http:// képhivatkozásokat.
3. Külső szolgáltatók beillesztett kódjait frissítsd a szolgáltató aktuális HTTPS-es snippetjére.

Shoprenter

1. Sablonkezelő: a saját szerkesztésű blokkokban keress http:// előfordulást.
2. Marketing- és analitikai kódrészletek beillesztési helyeit ellenőrizd.
3. Az oldalszerkesztőben a forráskód-nézetet használd, nem a vizuálisat.

Egyedi fejlesztés

1. Grepeld a kódbázist: grep -rn "http://" src/ templates/.
2. Használj protokoll-független vagy relatív útvonalat a saját erőforrásokra.
3. Külső erőforrásnál mindig írd ki a https://-t, ne hagyatkozz a // formára.
4. Kapcsold be a Content-Security-Policy: upgrade-insecure-requests fejlécet a cserék után.
5. Kapcsold be a HSTS (HTTP Strict Transport Security) fejlécet, hogy a böngésző eleve ne próbálkozzon HTTP-vel.

Mit néz ebből a riport

Az audit a letöltött HTML-ben keresi a http:// kezdetű erőforrás-hivatkozásokat. A „Nem biztonságos erőforrások (mixed content)” szabály közepes hatású, hatóköre a kód. Az ajánlás egyszerű: cseréld le a http:// erőforrás-hivatkozásokat https://-re.

• Csak a főoldalt nézik meg. A hiba gyakran egy aloldalon vagy egy régi blogcikkben ül, ahova soha nem nyit rá senki.
• Az adatbázisban maradnak a régi URL-ek. A HTTP-ről migrált oldal cikkszövegeiben és egyedi mezőiben beégve marad a http://.
• A //pelda.hu/kep.jpg formát használják. A protokoll-független forma elavult, e-mail sablonban és nem böngészős környezetben hibázik.
• Csak CSP-vel oldják meg. Az upgrade-insecure-requests elrejti a tünetet, de ha a forrás nem tud HTTPS-t, az erőforrás így is eltűnik.
• Elfelejtik a cache-t üríteni. A javítás megtörtént, de a gyorsítótár még a régi HTML-t szolgálja ki napokig.
• Csak az aktív tartalmat javítják. A képek passzívak, nem blokkolódnak, de a lakat így is sérül.
• A staging HTTP-n fut. A fejlesztő nem látja a hibát, mert a böngésző csak HTTPS-oldalon figyelmeztet.

Egy tipikus hibás blokk. Ugyanazon az oldalon van jó és rossz hivatkozás is:

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="utf-8">
  <!-- ROSSZ: aktív tartalom, a böngésző blokkolja -->
  <script src="http://cdn.pelda.hu/app.js"></script>
  <link rel="stylesheet" href="http://cdn.pelda.hu/style.css">

  <!-- JÓ -->
  <script src="https://cdn.pelda.hu/app.js"></script>
  <link rel="stylesheet" href="/assets/style.css">
</head>
<body>
  <!-- ROSSZ: passzív, nem blokkolódik, de a lakat sérül -->
  <img src="http://pelda.hu/kepek/logo.png" alt="Logó">
</body>
</html>

A teljes kimenet gyors átvizsgálása parancssorból:

curl -s https://pelda.hu | grep -oE '(src|href)="http://[^"]+'

Ha a parancs nem ad vissza semmit, az oldal HTML-jében nincs http:// erőforrás. Alkalmi kiegészítésként a böngésző felemelheti a maradék kéréseket:

Content-Security-Policy: upgrade-insecure-requests
Strict-Transport-Security: max-age=31536000; includeSubDomains

Ez a két fejléc együtt zárja a rést, de csak a forráscsere mellett, nem helyette.