XSS攻击，XSS预防(前端安全)，XSS练习

最新推荐文章于 2023-05-22 21:03:31 发布

一拖再拖一拖再拖

最新推荐文章于 2023-05-22 21:03:31 发布

阅读量490

点赞数

分类专栏： javascript高级教程文章标签：前端 xss 安全

本文链接：https://blog.csdn.net/qq_41974199/article/details/125575670

版权

javascript高级教程专栏收录该内容

8 篇文章 2 订阅

订阅专栏

XSS攻击，XSS预防(前端安全)，XSS练习

文章目录

XSS攻击，XSS预防(前端安全)，XSS练习

1：什么是XSS

Cross-Site Scripting 为了和 CSS 做区分，这里的第一个字母 C 换成了 X ，简称 XSS。

XSS：恶意代码不被过滤，直接与网站的正常代码一起使用。浏览器无法判断哪些脚本信息是可信的，导致执行恶意代码。

在这里插入图片描述

2：XSS 分类

存储型 XSS
反射型 XSS
DOM 型 XSS

2.1：存储型 XSS

在这里插入图片描述

存储型XSS主要发生在用户在存储内容时输入恶意代码，导致恶意代码存储在数据库中，在其他人访问时获取并执行。

比如博客、论坛、评论。。。。。

2.2：反射型 XSS

在这里插入图片描述

用户构造了一个恶意的 url，服务器不对其进行处理，将恶意代码返回给浏览器。浏览器收到响应后，解析并执行，混入其中的恶意代码也被执行。

例子：

我们有这样的一个链接 http://xxx/xxx/home.php?msg="><script>alert('XSS');</script>。

它会先访问我们服务器上的一个 php 文件，但是我们的服务器文件不处理这个字段，返回恶意内容，然后被浏览器执行，引发 XSS 攻击。

2.3：DOM 型 XSS

在这里插入图片描述
用户构造了一个恶意的 url，用户点击后，浏览器解析并执行，混入其中的恶意代码也被执行。

比如这样的一个链接 http://xxx/xxx/index.html?msg="><script>alert('XSS');</script>。

2.4：存储型、反射型、DOM 型 XSS 的区别

存储型 XSS 恶意代码存在于数据库中。
反射型 XSS 恶意代码存在于 url 中，经过 服务器。（一般需要网络）
DOM型 XSS 恶意代码存在于 url 中，不经过 服务器。（本地执行）

2.4.1：反射型、DOM 型 XSS 的区别

DOM型 XSS 无需经过服务端执行。

本地的 HTML 文件
文本输入框
…

3：预防 XSS

3.1：使用指定类型

设置文本：innerText
设置属性：setAttribute
设置样式：style

如：domElement.innerText = "hello world";

尽量避免使用 innerHTML。

3.2：转义HTML

将 & < > " ' / 几个字符转义掉。

字符	转义
&	`&`
<	`<`
>	`>`
"	`"`
’	`'`
/	`/`

        
        function escapeHTML(str) {
            return str.replace(/[&<>'"]/g, (e) => {
                switch (e) {
                    case '&':
                        return '&amp;'
                    case '<':
                        return '&lt;'
                    case '>':
                        return '&gt;'
                    case '"':
                        return '&quot;'
                    case "'":
                        return '&#x27;'
                    case "/":
                        return '&#x2F;'
                }
            })
        }

3.3：链接设置白名单（href、src）

某些链接也会造成 XSS 攻击。

如：<a href="javascript:alert('XSS')">跳转...</a>

注意：<a href="JavaScriPt:alert('XSS')">跳转...</a> ，javascript 部分字母大写也可以执行。

我们可以设置一个白名单，这样链接必须以 http https 开头才能使用。

3.4：使用 HttpOnly

使用 HttpOnly 可以禁止 JavaScript 读取一些敏感的 cookie，攻击者在 XSS 注入后无法窃取该 cookie。

设置 HttpOnly 只能解决 cookie 劫持问题，但无法有效处理对于模拟用户身份等操作，但可以缓解 XSS 攻击。

3.5：输入检查

我们可以对数字、URL、电话号码、邮件地址等信息进行输入检查，过滤掉一些恶意代码。

但是，使用输入检查，攻击者可以绕过前端过滤，直接构造请求，比如Postman，ApiPost 等工具，依旧可以提交恶意代码。输入检查在一定程度上可以缓解 XSS 攻击。

3.6：长度限制

我们可以限定一个合理的长度，增加 XSS 攻击的难度。

3.7：内容安全策略 (CSP)

CSP 是一个白名单系统。开发人员清楚地告诉客户端可以加载和执行哪些外部资源。它的实现和执行都是由浏览器完成的，开发者只需要提供配置即可。

前端启用：

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*; child-src 'none';">

后端启用：使用 Content-Security-Policy HTTP 头部来指定策略。

具体的使用涉及了很多信息，这里推荐去查看一下阮一峰——Content Security Policy 入门教程的文章，写的非常详细。

在修补 XSS 漏洞时，我们面临一个非常大的困难，因为漏洞太多。
但不要气馁，理论上，XSS 漏洞虽然复杂，但完全可以解决。在设计方案时，针对不同的场景根据 XSS 攻击原理来使用不同的方案解决。同时，还有很多开源项目为我们提供了参考。

4：实现一个 XSS 攻击

要求：实现 弹出一个alert 弹窗。

<!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>Document</title>
    <style>
        #app > div{
            text-align: center;
            margin: 30px 0;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">评论列表</h1>
    <div id="app"></div>

    <div style="text-align: center;">
        <input id="inputId" type="text">
        <button id="subId">添加评论</button>
    </div>

    <script>
        let buEle = document.getElementById('subId');
        let appEle = document.getElementById('app');
        let inputEle = document.getElementById('inputId');
        buEle.addEventListener('click',function(){
            let div = document.createElement('div');
            div.innerHTML = inputEle.value;
            appEle.appendChild(div);
            inputEle.value = "";
        })
    </script>
</body>

</html>

你可以创建一个 HTML 文件在本地测试。

参考答案在最下方，请先按照自己思路去实现它。

在这里插入图片描述

图标来源
数据库：Smashicons
服务器： Assia Benkerroum
其他：Freepik

参考答案：<a href="javascript:alert('XSS')">click me</a>

一拖再拖一拖再拖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
XSS攻击，XSS预防(前端安全)，XSS练习

简称XSS。恶意代码不被过滤，直接与网站的正常代码一起使用。浏览器无法判断哪些脚本信息是可信的，导致执行恶意代码。分为存储型XSS，反射型 XSS，DOM型XSS。存储型、反射型、DOM 型 XSS 的区别。预防策略：使用指定类型；转义HTML；链接设置白名单（href、src）；使用 HttpOnly；输入检查；长度限制；内容安全策略 (CSP)。实现一个 XSS 攻击。...
复制链接

扫一扫