Javascript 简明教程
JavaScript - Clickjacking Attack
Clickjacking Attack
攻击者使用网络攻击的一种形式点击劫持欺骗用户点击与他们感知不同的对象；此类欺骗可能导致无意中的操作。攻击者通过覆盖有效内容的不可见元素或框架来实现此目的，从而伪装恶意意图或直接操纵网页元素的外观。
An attacker employs clickjacking, a form of cyber-attack, to deceive a user into clicking on an object different from their perception; this deception may result in unintended actions. The attacker achieves this by overlaying invisible elements or frames over valid content thus camouflaging the malicious intent or manipulating the appearance of webpage elements outright.
点击劫持导致严重的风险，例如未经授权的金融交易、潜在的数据泄露和敏感信息泄露。点击劫持影响用户和网站所有者，导致法律后果、经济损失和加剧网络安全担忧。点击劫持的欺骗性可能会损害用户信任，从而在数字生态系统中带来深远后果。
Severe risks such as unauthorized financial transactions, potential data breaches and compromise of sensitive information are posed by clickjacking. Clickjacking impacts users and website owners alike leading to legal consequences, financial loss, and heightened cybersecurity concerns. The deceptive nature of clickjacking can erode user trust with far-reaching consequences in the digital ecosystem.
免责声明：本章内容仅用于教育目的！
Disclaimer: The contents of this chapter are only for education purposes!
How clickjacking works?
Overlaying Content
-
The attackers create a malicious/spam/scam website or injects malicious code into a website which is actually legitimate in nature.
-
The attacker positions invisible elements or frames over the legitimate content on the page. These elements can be transparent iframes or other HTML elements.
Deceptive Presentation
-
The attacker then entices the user to interact with the visible elements on the page, which are typically buttons, links, or forms.
-
However, these visible elements are actually on top of the invisible, malicious elements.
User Interaction
-
When the user interacts with the visible elements (clicking, typing, etc.), they are unknowingly interacting with the hidden, malicious elements that are overlaid on top of the legitimate content.
Examples
Example 1: Button Overlay
提供的 HTML 代码展示了一个按钮覆盖点击劫持示例。该按钮显示给用户，但实际上它覆盖在一个隐藏的恶意 iframe 上，将用户引向一个可能有害的页面。
The provided HTML code demonstrates a button overlay clickjacking example. The button is presented to the user, but it is actually overlaid on a hidden, malicious iframe, leading the user to a potentially harmful page.
home.html
home.html
<!DOCTYPE html>
<html>
<body>
<h2>This is content of the home page</h2>
<iframe src="legitimate-site.html" width="100%" height="100%"></iframe>
<div>
<button onclick="window.location.href='malicious-site.html'">Click Me</button>
</div>
</body>
</html>legitimate-site.html
legitimate-site.html
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Welcome to Legitimate Site</h1>
</header>
<section>
<p>This is a legitimate website. You can trust the content here.</p>
</section>
<footer>
<p>© 2024 Legitimate Site. All rights reserved.</p>
</footer>
</body>
</html>malicious-site.html
malicious-site.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
.danger-sign {
color: red;
font-size: 2em;
}
.warning-message {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1 class="danger-sign">⚠️ Danger: Malicious Site</h1>
</header>
<section>
<p class="warning-message">This website has been identified as potentially harmful. Visiting it may pose a security risk to your computer and personal information.</p>
</section>
<footer>
<p>Please close this page immediately and do not proceed.</p>
</footer>
</body>
</html>
Example 2
在此示例中，当网页加载时，它会在一个标识为“clickMe”的按钮上自动单击。该特定按钮在通过单击接收用户交互后，会激活一个 JavaScript 事件，该事件会将用户重新路由到名为“malicious-site.html”的潜在有害网站。这种秘密操作令人不安地在不知情或未经同意的情况下将用户引导至意外目的地。始终注意：这些做法本质上确实具有潜在危害性且不道德；人们必须对此负责，并且在法律和道德范围内采取行动。
When the webpage loads in this example, it initiates an automatic click on a button identified as "clickMe." This specific button, upon receiving user interaction by means of clicking, activates a JavaScript event that re-routes the user to a potentially harmful site named 'malicious-site.html.' Such covert manipulation disconcertingly guides users towards unintended destinations without their knowledge or consent. Always note: these practices are indeed, potentially harmful and unethical in nature; one must approach them with responsibility and within legal and ethical boundaries.
malicious-site.html 代码与上述相同。
The malicious-site.html code is same as above.
home.html
home.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
button {
position: absolute;
z-index: 1;
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body onload="myFunction()">
<h2>Your Content Goes Here</h2>
<button id="clickMe">Click Me</button>
<script>
window.onload = function() {
var button = document.getElementById("clickMe");
button.click();
};
document.getElementById("clickMe").addEventListener("click", function() {
window.location.href = "malicious-site.html";
});
</script>
</body>
</html>
Real World Clickjacking Incidents
1. Facebook "Like" Button (2011)
攻击者在诱人的视频缩略图上覆盖了一个恶意“点赞”按钮，欺骗用户不知不觉点赞恶意页面。
Attackers overlaid a malicious "Like" button on an enticing video thumbnail, tricking users into unknowingly liking a malicious page.
2. Adobe Flash Update Scam (2015):
伪装成 Adobe Flash 更新的恶意按钮覆盖在合法网站上，导致用户不知不觉下载恶意软件。
Malicious buttons disguised as Adobe Flash updates were overlayed on legitimate websites, leading users to unwittingly download malware.
3. Twitter Clickjacking Attack
Twitter 上的恶意链接伪装成诱人内容，导致用户不知不觉在转发并传播恶意内容。
Malicious links on Twitter, disguised as enticing content, led users to unintentionally retweet and spread malicious content.
Preventive Measures
1. X-Frame-Options Header
在 Web 服务器的响应中将 X-Frame-Options 标头设置为“DENY”或“SAMEORIGIN”，以防止你的网站被嵌入 iframe 中。
Set the X-Frame-Options header to DENY or SAMEORIGIN in your web server’s response to prevent your site from being embedded in iframes.
2. Frame-Busting Scripts
在你的网页中实施破帧脚本，以防止它们被嵌入 iframe 中。
Implement frame-busting scripts in your web pages to prevent them from being embedded in iframes.
3. Content Security Policy (CSP)
使用内容安全策略标头控制你的网站可以从中加载内容的源，从而降低 Clickjacking 风险。
Use Content Security Policy headers to control the sources from which your website can load content, reducing the risk of clickjacking.
4. User Education
教育用户了解与交互不熟悉或可疑内容相关的潜在风险。
Educate users about potential risks associated with interacting with unfamiliar or suspicious-looking content.
随着网络安全的发展，Clickjacking 的未来趋势可能包括利用人工智能的更复杂技术、越来越多地使用社会工程策略以及关注绕过高级安全措施。此外，随着增强现实 (AR) 和虚拟现实 (VR) 等新兴技术的兴起，沉浸式的 Clickjacking 体验的新向量可能会出现，需要在防御策略和用户意识方面不断创新。
As cybersecurity evolves, future trends in clickjacking may include more sophisticated techniques leveraging artificial intelligence, increased use of social engineering tactics, and a focus on bypassing advanced security measures. Additionally, with the rise of emerging technologies like augmented reality (AR) and virtual reality (VR), new vectors for immersive clickjacking experiences may emerge, demanding continuous innovation in defensive strategies and user awareness.