Javascript 简明教程
JavaScript - Clickjacking Attack
Clickjacking Attack
攻击者使用网络攻击的一种形式点击劫持欺骗用户点击与他们感知不同的对象；此类欺骗可能导致无意中的操作。攻击者通过覆盖有效内容的不可见元素或框架来实现此目的，从而伪装恶意意图或直接操纵网页元素的外观。
点击劫持导致严重的风险，例如未经授权的金融交易、潜在的数据泄露和敏感信息泄露。点击劫持影响用户和网站所有者，导致法律后果、经济损失和加剧网络安全担忧。点击劫持的欺骗性可能会损害用户信任，从而在数字生态系统中带来深远后果。
免责声明：本章内容仅用于教育目的！
How clickjacking works?
Examples
Example 1: Button Overlay
提供的 HTML 代码展示了一个按钮覆盖点击劫持示例。该按钮显示给用户，但实际上它覆盖在一个隐藏的恶意 iframe 上，将用户引向一个可能有害的页面。
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
<!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
<!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”的潜在有害网站。这种秘密操作令人不安地在不知情或未经同意的情况下将用户引导至意外目的地。始终注意：这些做法本质上确实具有潜在危害性且不道德；人们必须对此负责，并且在法律和道德范围内采取行动。
malicious-site.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>