Clickjacking (2)

Abychom to neměli tak jednoduché, zvolím tentokrát pro demonstraci jiný příklad než v minulém dílu. V odstavci „Příklady využití“ jsem zmínil, že je možné skombinováním clickjackingu a zneužitím ochrany proti CSRF odeslat jediným nevinným kliknutím také data z předvyplněného formuláře. Právě na tomto příkladu založím dnešní ukázku. Opět zůstaneme v naší aplikaci zranitelného webmailu, kde se budeme snažit přinutit svou oběť, aby jediným kliknutím odeslala emailovou zprávu, kterou jí přichystáme.

Zneužíváme ochranu před útoky typu CSRF

Vzhledem k tomu, že jsme o CSRF již mnohokrát psali, nebudu se o tomto typu útoku příliš rozepisovat. Budu předpokládat, že víte, co tento typ útoku představuje a jak před ním své aplikace ochránit. Ideální ochrana spočívá v použití jedinečných, časově omezených autorizačních tokenů, které se přidávají k jednotlivým požadavkům. Pokud je tato ochrana v aplikaci implementována, ale současně není ošetřen clickjacking, pak lze této ochrany často jednoduše zneužít k jejímu vlastnímu zkompromitování právě clickjackingem.

Proč tomu tak je? Může se stát, že je uživateli vystaven autorizační token s desetiminutovou platností a tento je uživateli předán společně s formulářem pro vložení diskuzního příspěvku. Uživatel ovšem stráví psaním příspěvku 20 minut a po jeho odeslání je tedy token již neplatný. Dokážete si představit, jak by asi tento uživatel vyváděl, kdyby mu server pouze oznámil, že vypršela platnost autorizačního tokenu, a že má svůj příspěvek napsat znovu. Aby se tomuto zabránilo, podá sice aplikace uživateli chybovou zprávu o propadlé platnosti tokenu, ale zpráva se předvyplní do formuláře s novým autorizačním tokenem a uživateli stačí formulář pouze opětovně odeslat.

Podobně se chová také formulář pro psaní e-mailových zpráv v našem zranitelném webmailu. Schválně zkuste během odesílání zprávy zachytit požadavek a pozměňte nebo odstaňte v něm hodnotu autorizačního hashe. Výsledek bude vypadat tak, jak ukazuje následující screenshot.

OK, pojďme se vrhnout na zneužití této vlastnosti. Během odesílání jste si zajisté všimli, že se na stranu serveru, konkrétně na adresu:

http://www.hackmail.cz/articles/newmessage.php

odesílají vedle hashe také proměnné prijemce, subject a messagetext. Pokud by se jednalo o GET požadavek, vyvolali bychom u přihlášeného uživatele stejnou reakci ze screenshotu jednoduše tak, že bychom mu podstrčili odkaz směřující na toto URL:

http://www.hackmail.cz/articles/newmessage.php?hash=&prijemce=karel&subject=Test&messagetext=Testovac%ED%20zpr%E1va

Protože se ale jedná o požadavek odesílaný metodou POST, budeme nejprve muset provést konverzi metod. K tomu se nám bude výborně hodit zdejší projekt GET2POST, s jehož pomocí vytvoříme následující odkaz:

http://www.soom.cz/projects/get2post/resend.php?hash=&prijemce=karel&subject=Test&messagetext=Testovac%ED%20zpr%E1va&uri=http%3A%2F%2Fwww.hackmail.cz%2Farticles%2Fnewmessage.php

Jakmile uživatel přihlášený do webmailu na tento odkaz klikne, obdrží stejnou odpověď, jako byla zachycena na výše uvedeném screenshotu.

My bychom ale potřebovali, aby uživatel v tuto chvíli kliknul na tlačítko odeslat, což samozřejmě vědomě neudělá. Použijeme proto v tuto chvíli metody clickjackingu, které jsme si představili v předchozím dílu a přinutíme tak uživatele na toto tlačítko kliknout, aniž by o tom věděl. Rozdíl oproti příkladu z minulého dílu spočívá tedy pouze ve změně hodnoty parametru SRC u tagu IFRAME a změny pozice, kde chceme vykreslit naše fake tlačítko.

Měníme pozici napadeného prvku

Nyní se již dostáváme k samotné změně pozice klikatelného prvku webové stránky, proti kterému útočíme. Ne vždy nám totiž originální pozice vyhovuje a i z výše uvedeného příkladu je zřejmé, že by bylo lepší, kdybychom mohli naše fake tlačítko pro vstup vycentrovat pěkně na střed obrazovky. Jak ovšem v takovémto případě postupovat?

V reálu se mohou vyskytnout následující případy upravení pozice prvku:
a) potřebujeme prvek posunout vpravo a/nebo dolů
b) potřebujeme prvek posunout vlevo a/nebo nahoru
c) potřebujeme, aby byla vidět jen konkrétní část původní stránky

V případě prvých dvou možností nebudeme mít s pozicováním prvku téměř žádné problémy. Stačí, když jednoduše nastavíme rámu následující CSS vlastnosti:

position: relative,
left: XYpx;
top: XZpx;

Pokud jsou hodnoty XY kladné, posouváme celým rámem vpravo a/nebo dolů, pokud jsou záporné, je posunutí rámu směrováno vpravo a/nebo nahoru. Často se také hodí nastavit rámu rozměry pomocí vlastností:

width: XYpx;
height: XYpx;

Rozměry přitom volíme nejlépe tak, aby rám svým pravým spodním rohem obkreslil cílový prvek. Mnohem lépe se nám pak provádí pozicování prvku. Tím, že rámu nastavíme konkrétní šířku a výšku, se také vyvarujeme toho, že by se obsah rámu přizpůsoboval aktuálnímu rozlišení obrazovky nebo okna prohlížeče.

V neposlední řadě pak stojí za to, skrýt scrollbary rámu a případně i hlavního okna. K tomuto nám poslouží vlastnosti:

overflow: hidden
overflow-x: hidden
overflow-y: hidden
případně atribut prvku scrolling="no" v IE.

V našem konkrétním případě tedy můžeme pro vycentrování tlačítka „odeslat“, tak aby se vždy překrývalo s fake tlačítkem „vstup“ použít například následující kód. Ten vytváří prvek DIV stejných rozměrů, jako má samotný rám a je také stejně pozicovaný. Díky tomu se nám vždy pěkně kryje s obsahem rámu.

S variantou c) se setkáme například ve chvíli, kdy není možné rámu nastavit neprůhlednost a není možné nechtěné prvky stránky ani překrýt jinými rámy. Tento případ může nastat, pokud do rámu načítáme různé ActiveX prvky, součásti operačního systému a jiný lokální obsah, například při FFFjackingu. Zrovna tak tuto metodu výřezu použijeme při dynamicky umístěném rámu, o kterém si povíme níže.

V případě výřezů se mi osvědčilo vytvořit dvouúrovňové vnoření plovoucích rámů, kdy jedním rámem provedeme posun pozice tak, abychom klikatelný prvek umístili do levého horního rohu stránky a druhým rámem ořízneme obsah na požadovanou velikost a umístíme jej na konkrétní pozici ve své stránce.

Nakonec už jen v případě potřeby nastavíme tomuto oříznutému rámu průhlednost a umístíme jej nad požadovaný fake prvek naší stránky.

Klikni si, kam chceš

Pozicování prvku nám umožňuje provádět s rámy přímo akrobatické kousky. Když už totiž umíme oříznout rámem pouze námi zvolený obsah a tento zvládneme umístit kamkoliv na svou stránku, tak už nám nic nebrání ani v tom, abychom pozici prvku měnili dynamicky. Snadno si tak vytvoříme miniaturní rám o rozměrech například 1x1 pixel, který se bude neustále nacházet přímo pod špičkou kurzoru. Ať si pak milý uživatel klikne na stránce, kde chce, my budeme mít stále jistotu, že kliká přesně na to místo, které chceme my.

Zůstaneme u našeho tlačítka pro odeslání mailu a vytvoříme si jeho dynamické sledování kurzoru. Budeme potřebovat soustavu vložených rámů z výše uvedeného příkladu, která nám z celé stránky webmailu vyřízne pouze drobnou oblast odesílacího tlačítka. Druhý výše uvedený kód stránky ovšem obohatíme o JavaScript, který se postará o změnu pozice rámu při každém pohybu kurzoru. Níže uvedený příklad je testován ve Firefoxu 14, v němž bylo nutné zachytávat událost MouseMove nad nějakým prvkem. Z tohoto důvodu se v kódu nachází prvek IMG. Ve dřívějších verzích FF a v jiných prohlížečích ovšem funguje ovladač události onMouseMove i v tagu BODY.

Co nás čeká příště

Co vám zajisté přijde jako veliká nevýhoda doposud uvedených metod, je skutečnost, že po kliknutí nedochází k žádné viditelné reakci. Je to pochopitelné, protože ona reakce probíhá v průhledném rámu a díky omezení Same Origin Policy není možné tyto prokliky uvnitř rámu (jehož obsah pochází z jiné domény) zjišťovat. Přesto se v příštím díle vypořádáme i s tímto neduhem a přesvědčíme naši stránku, aby na kliknutí ve skrytém rámu pohotově reagovala.