Clickjacking (5)

Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: .cCuMiNn.
Datum: 1.10.2012
Hodnocení/Hlasovalo: 1.4/10

V minulém díle jsme si ukázali způsob, kterým lze přinutit uživatele k vyplnění polí formulářů, aniž by měli tušení, čeho se tím ve skutečnosti dopouští. Tentokrát pro dosažení stejného výsledku použijeme metody Drag&Drop z nabídky HTML5.

Útok z minulého dílu vyžadoval od uživatelů, aby zapsali námi podstrčený text do vstupního pole formuláře. Jedná se sice o velice účinnou metodu, ale můžeme ji využít pouze pokud požadujeme vložení krátkých textů. Tyto texty navíc nesmí u uživatele vzbudit žádné podezření. Ideální by tedy bylo, pokud bychom nějakým způsobem dokázali přimět uživatele k vložení jakýchkoliv dat tak, aby vůbec neviděl jejich obsah. To se může na první pohled zdát jako nereálné, ale HTML5 a jeho Drag and Drop možnosti, nám přesně tohoto cíle pomohou dosáhnout.

Pro lepší pochopení začnu jednoduchým příkladem, který budu postupně rozvíjet.

Výše uvedený kód nedělá nic jiného, než že na stránce zobrazí dva prvky: obrázek klíčku a textareu pro vkládání textu. To důležité, čeho byste si měli v kódu všimnout je:

Řádek 22 - Vlastnost draggable u vloženého obrázku, která povoluje tažení objektu a vlastnost onDragStart definující ovladač události, který se vykoná, jakmile začneme obrázkem táhnout.
Řádek 11 – dataTransfer.SetData() – Nastavení přenášených dat. V tomto případě nastavujeme typ dat na prostý text, jehož obsahem je e-mailová adresa attacker@attacker.cz'.

Stránku z uvedeného příkladu najdete zde. Zkuste na této stránce přetáhnout obrázek klíčku nad textové pole, kde klíček položte. Vidíte už to nebezpečí a možnosti využití s clickjackingem? Nebohý uživatel pouhým přetažením objektu může nevědomky vložit nebezpečný payload a naplnit jím například pole formuláře.

Frčíme dál

Pojďme se ale posunout o kousek dál, a náš úvodní příklad trochu vyšperkovat.

Co jsme tedy provedli za změny, a co stojí v kódu za zmínku.

Řádek 13 – Definovali jsme proměnnou "a", která bude uchovávat informaci o tom, zda právě táhneme klíčkem nad textareou (a=1), nebo mimo ni (a=0).
Řádek 6 – Prvku textarea jsme CSS stylem nastavili částečnou průhlednost.
Řádek 41 – Přidali jsme na stránku další obrázek s vysacím zámkem a tento jsme umístili pod poloprůhlednou textareu.
Řadek 42 – Prvku textarea jsme nastavili atributem onDragEnter ovladač události, který se vykoná ve chvíli, kdy klíček přetáhneme nad tento prvek. Ve chvíli kdy se tak stane, změníme na řádku X obrázek zamčeného zámku za zámek otevřený a nastavíme proměnnou "a" na hodnotu 1, abychom mohli v případě upuštění klíčku zjistit, kde se s taženým klíčkem právě nacházíme. Vlastnost cancelBubble na rádku 27 je důležitá, abychom zabránili probublávání této události do prvku hranice.
Řádek 40 – Pod textareu jsme umístili oblast hranice, která textareu na všech stranách přesahuje. Tato oblast je důležitá, abychom mohli nastavovat proměnnou "a" zpět na hodnotu 0 vždy, když táhneme klíčkem mimo textareu. Současně po přetažení nad tuto oblast měníme obrázek zámku na zamčený.
Řádek 47 – Vytvořili jsme objekt krytka, který při táhnutí klíče zakryje původní obrázek klíče. Kód, který je zodpovědný za přesunutí krytky před klíč na začátku tažení, najdete na řádku 22.
Řádek 46 – K prvku s obrázkem klíčku jsme přidali atribut odDragEnd, kterým definujeme ovladač události pro puštění objektu.
Řádky 14-20 – Kód ovladače události, který se vykoná ve chvíli, kdy klíček upustíme. V takovém případě testujeme proměnnou "a", abychom zjistili, zda jsme upustili klíček mimo textareu (posuneme krytku do pozadí a zobrazíme tím původní obrázek klíčku) nebo nad textareou (zobrazíme okno se zprávou).

Stránku, kterou tvoří výše uvedený kód, si opět můžete vyzkoušet zde.

Finální útok

Konečný útok, při kterém opět přinutíme oběť k tomu, aby si zapsala naši e-mailovou adresu do pole pro přeposílání příchozích zpráv v našem testovacím webmailu, se od výše uvedeného příkladu již příliš lišit nebude. Jediné změny, které provedeme, spočívají v tom, že si vytvoříme soustavu vložených rámů, které z webové stránky webmailu vyříznou pouze přesně definovanou oblast se vstupním polem pro zadání adresy a s tlačítkem pro uložení. Tímto rámem pak nahradíme naší textareu. Dále přidáme nadpis a nahradíme alert po upuštění klíčku zobrazením tlačítka vstup na místě původního tlačítka pro uložení.

Výsledný kód pak bude vypadat takto:



  
  
  
  


  Vstup na stránku si musíte nejprve odemknout

Jediné, co k výslednému kódu ještě dodám, je, že nemůžeme ošetřovat události onDragOver nebo onDragEnter přímo nad vlastním obsahem rámu. V tom nám opět brání Same Origin Policy. Jejich výskyt tak můžeme ošetřovat pouze ve chvíli, kdy objekt táhneme přes okraj rámu. Protože ale někdy při rychlejším přejetí okraje není tato událost zaznamenána, nastavil jsem vlastností border větší šířku tohoto okraje.

Příklad by se dal dále rozšířit o testování, zda uživatel kliknul nad tlačítkem vstup, ale s principy, jak toho dosáhnout jsme se seznámili již v jednom z předchozích dílů. Tuto část si tedy můžete zkusit dodělat sami.

Nakonec přidávám ještě video zachycující průběh útoku.

Na co se můžete těšit příště

Příště si již konečně povíme něco o tom, jak před clickjackingem ochránit naše vlastní webové aplikace, abychom si v následujícím závěrečném dílu mohli ukázat techniky, kterými lze tyto ochrany obejít :)