有一句话叫做：你看到的，不一定是真的，但可能是想让你看到的。在学习前端之前，有幸学习过一阵子PPT和Flash设计，其中有一个知识点就是，视觉效果，最常用的套路就是使用遮罩层来制作效果，今天就聊聊基于遮罩导致的前端攻击：点击劫持。
前端点击劫持
前端点击劫持实际上就是通过层叠样式，在原有的页面样式上叠加自己的内容，然后通过色彩或者透明消除用户的警惕，当用户点击看到的功能的时候，实际上点击的是隐藏的功能，这样满足攻击者的需求。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端劫持</title>
<style>
.myidea{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.0;
}
</style>
</head>
<body>
<div>
视觉效果展示内容
<img src="F:\dazejiuzhang\图片资料\yqkfdx1.jpg">
</div>
<div class="myidea">
<a href="http://www.jiece.com">跳转链接</a>
</div>
</body>
</html>
视觉效果
但实际上
当然，这个案例当中只是采用了一个透明的div，在实际的劫持场景当中，更多的是采用复杂的iframe来覆盖。
前端点击劫持防御
知道原理之后，防御也就需要琢磨了：
1、在自己不使用iframe的前提下，对iframe进行限制，这个可以通过HTTP头进行设置X-Frame-Options属性可以实现，X-Frame-Options有三种模式：
| 属性 | 描述 |
|---|---|
| DENY | 浏览器拒绝解析当前页面任何frame； |
| SAMEORIGIN | 浏览器只解析当前页面同源的frame； |
| ALLOW-FROM origin | 浏览器只解析当前页面当中设置的origin的的frame； |
配置在nginx当中设置：
add_header X-Frame-Options DENY;
2、检测所有提交的内容，防止通过前端XSS攻击携带前端点击劫持内容，这个和防御XSS攻击类似。
3、通过JS限制顶级的嵌套样视：
<head>
<style id="click_box">
html {
display: none !important;
}
</style>
</head>
<body>
<script>
if (self == top) {
var style = document.getElementById('click_box')
document.body.removeChild(style)
} else {
top.location = self.location
}
</script>
</body>
思考
前端点击劫持本身攻击成本比XSS要高一点，并且容易被防御，但是，更容易出现在大家不注意，不经意的地方，这里忽然想到之前一个大佬聊的一句话：搞安全的最后，最难的就是要搞懂人心。“关于前端点击劫持就先聊这么多，还请各位大佬多多指点。
