五分钟带你了解XSS攻击！

最新推荐文章于 2024-08-16 18:08:04 发布

一只幸运的羊^

最新推荐文章于 2024-08-16 18:08:04 发布

阅读量1k

点赞数 14

分类专栏：前端文章标签： xss 前端

本文链接：https://blog.csdn.net/ORANGE_3iING/article/details/140819389

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

XSS（跨站脚本攻击）

什么是XSS？

一、定义和概述

跨站脚本攻击（XSS）是一种安全漏洞，它允许攻击者将恶意客户端代码注入网站。此代码由用户执行，让攻击者绕过访问控制并冒充用户。

如果 Web 应用程序没有采用足够的验证或编码，则这些攻击会成功。

用户的浏览器无法检测到恶意脚本是不可信的，因此允许其访问任何 Cookie、会话令牌或其他特定于站点的敏感信息，或者让恶意脚本重写 HTML 内容。

XSS通常发生在以下情况：

1）数据通过不受信任的源（通常是 Web 请求）进入 Web 应用

2）动态内容被发送给 Web 用户，而未经过恶意内容验证。

恶意内容通常包括 JavaScript，但有时还包括 HTML、Flash 或浏览器可以执行的任何其他代码。基于 XSS 的攻击种类几乎是无限的，但它们通常包括向攻击者传输 cookie 或其他会话信息等私人数据、将受害者重定向到攻击者控制的网页，或以易受攻击的站点为幌子在用户的计算机上执行其他恶意操作。

XSS攻击通常会通过url参数注入或输入框注入。

二、不同类型的XSS攻击（存储型、反射型、DOM型）

1. 存储型XSS攻击

对于储存型XSS 攻击，注入的脚本将永久存储在目标服务器上。常见于社交网站，例如论坛的评论部分。

比如我们有一个评论功能，这里有一个输入框，攻击者输入一段包含恶意脚本（如用于窃取用户信息）的内容，点击提交，如果网站未适当检查用户输入，此时服务器端就会将恶意代码存储到数据库，其他访客每次访问时，都会拉取到恶意代码并执行，从而使访客信息被窃取。

由于恶意脚本存储在服务器上，任何其他访问的用户都将执行此代码，所以存储型XSS的危害是严重且持久的。

2. 反射型XSS攻击

反射型 XSS 攻击是最基本的 XSS 类型。

当用户被诱骗点击恶意链接、提交特制表单或浏览恶意网站时，注入的代码会传输到易受攻击的网站。Web 服务器将注入的脚本反射回用户的浏览器，作为请求的一部分发送到服务器的数据的响应中。

浏览器执行代码是因为它假设响应来自用户已经与之交互的“受信任”服务器。

简单来说，受攻击的网站（浏览器信任的网站）就相当于“工具人”，攻击者“借刀杀人”，借助这个网站，将恶意脚本注入后，服务器以为是正常访问，没有进行额外的过滤，直接返回对应的结果。浏览器则把这些结果呈现在页面上，从而可能执行一些恶意操作。

3. 基于DOM的XSS攻击

反射和存储的 XSS 是服务器端的问题，而基于 DOM 的是浏览器端的问题。基于 DOM 的 XSS 发生在 DOM（文档对象模型）中，而不是作为 HTML 的一部分。页面本身不会更改，但由于对 DOM 环境的恶意修改，页面中包含的客户端代码以意外的方式运行。

这种攻击不是将恶意代码插入页面，而是允许加载合法页面，然后利用用户输入将 HTML 添加到页面，执行恶意脚本。

例如，攻击者可能会使受害者点击恶意链接（例如www.legitimatewebsite.com/contact#< script >malicious ）。网站将收到对页面的合法请求，但不会收到恶意片段（因为浏览器不会在 # 字符之后向站点的服务器发送任何内容）。受害者会看到合法的网站，但受害者的浏览器也会执行恶意脚本。

由于这种攻击的工作方式，服务器端保护无法阻止它，因为恶意代码根本没有被发送到服务器。因此，要防止这种攻击，就需要确保 JavaScript 不会以不安全的方式解释 URI 片段（统一资源标识符 - URI 标识指定位置的资源，例如 URL）。

三、XSS攻击的危害

窃取cookie
劫持流量
插入广告
置入木马
获取用户信息

四、前端如何防御XSS攻击

1. 输入验证

客户端验证：在前端进行输入验证，确保用户输入的数据符合预期的格式和长度。例如，使用正则表达式来验证电子邮件地址或电话号码。

避免依赖客户端验证：尽管客户端验证有助于提高用户体验，但不要仅依赖于此。服务端验证仍然是必要的，因为客户端验证容易被绕过。

2. 输出编码

HTML编码：对动态生成的HTML内容进行编码，以防止恶意代码被执行。

        function encodeHTML(str) {return str.replace(/&/g, '&')
                      .replace(/</g, '<')
                      .replace(/>/g, '>')
                      .replace(/"/g, '"')
                      .replace(/'/g, ''');
        }

        const userInput = '<script>alert("XSS")</script>';
        const safeHTML = encodeHTML(userInput);
        document.getElementById('output').innerHTML = safeHTML;

属性编码：确保HTML属性中的内容被正确编码，防止属性值中包含恶意代码。

       function encodeAttribute(str) {return str.replace(/&/g, '&')
                     .replace(/"/g, '"')
                     .replace(/'/g, ''');
       }

       const userInput = '"><img src=x onerror=alert(1)>';
       const safeAttribute = encodeAttribute(userInput);
       const img = `<img src="${safeAttribute}">`;
       document.getElementById('output').innerHTML = img;

3. 使用安全的框架和库

React 、Angular、Vue等前端框架：这些框架内置了防止XSS攻击的机制。它们通过自动进行输出编码和模板引擎渲染，减少直接操作DOM的机会。

4. 使用内容安全策略(CSP)

配置 CSP：设置CSP头部，限制页面可以加载的资源类型和来源。

只需将 Content-Security-Policy HTTP 标头添加到网页和任何适当的指令即可

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none';">

5. 避免内联JavaScript

避免使用内联事件处理器：如onclick、onload等，改用外部的JavaScript文件或在脚本块中添加事件监听器。

    // 不推荐
    <button onclick="alert('XSS')">Click me</button>

    // 推荐
    <button id="myButton">Click me</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {alert('XSS');});
    </script>