JavaScript - Clickjacking 攻擊

Hello, 有志者！今天，我們將要深入探索網頁安全的迷人世界，特別聚焦在一個名叫Clickjacking的狡猾小花招。別擔心如果你是編程新手——我會一步步引導你了解這個主題，就像我過去幾年來為無數學生所做的那樣。那麼，我們開始吧！

JavaScript - Clickjacking Attack

Clickjacking 攻擊

想像一下，你正要點擊一個可愛的貓咪視頻，但意外地訂購了100個橡皮鴨子。這就是Clickjacking攻擊所做的——它騙你點擊你並未打算點擊的東西。

Clickjacking，也被稱為UI重置，是一種惡意技術，攻擊者用它來騙用戶點擊他們以為正在點擊的東西以外的東西。這可能導致意外的行為、數據竊取，甚至是惡意軟件的安裝。

Clickjacking是如何工作的？

現在，讓我們分解這種狡猾的攻擊是如何實際工作的：

攻擊者創建一個看似無害的網頁。
他們在不可見的iframe中嵌入目標網站（他們希望你與之互動的網站）。
攻擊者的頁面設計得與目標網站的按鈕或鏈接完美重疊。
當你以為你在點擊攻擊者的頁面時，你實際上是在與隱藏的目標網站進行交互。

這就像魔術師的手法，但用在網頁上！

示例

讓我們來看一些代碼示例，以更好地理解這個概念。別擔心如果你現在還不太理解——我們會一一解析！

示例 1：基本的Clickjacking

<html>
<head>
<title>贏得獎品！</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>點擊這裡贏得獎品！</h1>
<button>領取獎品</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

在這個示例中：

我們創建了一個欺騙性的網站，承諾提供獎品。
我們在不可見的iframe中嵌入了目標網站（example.com/delete-account）。
IFRAME被置於“領取獎品”按鈕之上。
當用戶點擊按鈕時，他們實際上是在點擊目標網站上的刪除賬戶按鈕！

示例 2：帶有拖放功能的Clickjacking

<html>
<head>
<title>照片編輯器</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>拖動圖片進行編輯</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

在這個更先進的示例中：

我們創建了一個假的照片編輯器界面。
目標網站（可能會分享私密數據）被嵌入在不可見的iframe中。
當用戶試圖拖放圖片時，他們可能無意中與目標網站進行交互，從而可能分享私密信息。

真實世界的Clickjacking事件

Clickjacking並不只是理論上的威脅。它在現實世界的攻擊中被使用過：

在2008年，一個通過Facebook傳播的Clickjacking蟲病毒使用戶無意中點擊某些頁面的“喜歡”按鈕。
在2012年，一位研究人員演示了對Google Android應用市場的Clickjacking攻擊，可以騙用戶在不知情的情況下購買應用。
在2017年，在Microsoft Outlook Web App中發現了一個Clickjacking漏洞，攻擊者可能利用它來閱讀受害者的電子郵件。

這些事件顯示了了解和防止Clickjacking攻擊的重要性。

預防措施

現在我們知道了危險，讓我們來看看我們如何可以防止Clickjacking：

方法	描述	示例
X-Frame-Options	防止頁面在iframe中顯示的HTTP頭	`X-Frame-Options: DENY`
內容安全政策	允許更細粒度地控制哪些源可以嵌入你的內容	`Content-Security-Policy: frame-ancestors 'self'`
框架破解腳本	破壞iframe的JavaScript	`if (top != self) top.location = self.location;`
SameSite Cookies	禁止cookies在跨站請求中發送	`Set-Cookie: session=123; SameSite=Strict`

讓我們來看一個框架破解腳本的簡單示例：

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>受保護的內容</h1>
<p>這個頁面受到Clickjacking的保護！</p>
</body>
</html>

這個腳本的作用如下：

初始時隱藏整個頁面。
檢查頁面是否是最頂層窗口。
如果是，則顯示內容。
如果不是（即它在iframe中），則破壞iframe。

記住，網頁安全就像貓捉老鼠遊戲。隨著新攻擊方法的出現，我們必須不斷更新我們的防禦。保持好奇心，持續學習，並在您的網頁開發旅程中始終把安全放在首位！

我希望這個教程能夠幫助您理解Clickjacking攻擊。記住，有了編碼的強大力量，也伴隨著巨大的責任。明智地使用你的技能，並且編程愉快！

Credits: Image by storyset

上一教程:

JavaScript - IndexedDB

下一教程:

JavaScript - 科里化