XSS

最新推荐文章于 2025-10-21 17:12:45 发布

原创最新推荐文章于 2025-10-21 17:12:45 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #前端安全 #xss攻击

本文深入解析XSS（跨站脚本攻击）的概念、类型及其防范措施，涵盖反射型、存储型及基于DOM的XSS攻击，并介绍如何通过HttpOnly、输入检查与输出检查等方式有效抵御XSS威胁。

XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。

XSS攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种方式。攻击者注入恶意的脚本一般包括JavaScript，有时包含HTML，Flash。有很多种进行XSS攻击的方式。但其中共同点是：将一些隐私数据如cookie，session发送给攻击者，将受害者重定向为攻击者所控制的网站，在受害者的机器进行恶意操作。

XSS攻击分为三类：反射型(非持久型)，存储型(持久型)，基于DOM

1.反射型：反射型攻击只是简单地把用户输入的数据反射给浏览器，这种攻击方式往往需要诱导用户点击一个链接，或者提交一个表单，进入一个恶意的网站

2.存储型：存储型攻击会把用户输入的数据存储在服务端，当用户浏览网站时，浏览器请求数据时，脚本会通过服务器传回并执行，这种攻击具有很强的稳定性。

比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码。

3.基于DOM：这种XSS攻击是通过恶意脚本修改页面的DOM结构，是纯粹发生在客户端的攻击。数据流向URL->浏览器

XSS 攻击的防范

现在主流的浏览器内置了防范 XSS 的措施，例如 CSP(https://www.cnblogs.com/leaf930814/p/7368429.html)。但对于开发者来说，也应该寻找可靠的解决方案来防止 XSS 攻击。

HttpOnly 防止劫取 Cookie

HttpOnly 最早由微软提出，至今已经成为一个标准。浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie。

上文有说到，攻击者可以通过注入恶意脚本获取用户的 Cookie 信息。通常 Cookie 中都包含了用户的登录凭证信息，攻击者在获取到 Cookie 之后，则可以发起 Cookie 劫持攻击。所以，严格来说，HttpOnly 并非阻止 XSS 攻击，而是能阻止 XSS 攻击后的 Cookie 劫持攻击。

cookie使用过程：

浏览器先像服务器发起请求，此时浏览器没有cookie

服务器返回set-cookie头并在客户端设置cookie（这一阶段可设置httponly）

浏览器每次发起请求后携带cookie（在cookie过期前）

输入检查

输入检查必须放在服务端，在客户端会有绕过。但是在客户端过滤也是有必要的，可以避免用户的错误操作，减轻服务器压力。

输入的数据有可能在多个地方展示，如果在一个地方对输入进行了统一的过滤，会造成输出结果与预期不符的情况。

不要相信用户的任何输入。对于用户的任何输入要进行检查、过滤和转义。建立可信任的字符和 HTML 标签白名单，对于不在白名单之列的字符或者标签进行过滤或编码。

在 XSS 防御中，输入检查一般是检查用户输入的数据中是否包含 <，> 等特殊字符，如果存在，则对特殊字符进行过滤或编码，这种方式也称为 XSS Filter。

而在一些前端框架中，都会有一份 decodingMap，用于对用户输入所包含的特殊字符或标签进行编码或过滤，如 <，>，script，防止 XSS 攻击：

输出检查

用户的输入会存在问题，服务端的输出也会存在问题。一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击。例如利用 sanitize-html 对输出内容进行有规则的过滤之后再输出到页面中。

// vuejs 中的 decodingMap

// 在 vuejs 中，如果输入带 script 标签的内容，会直接过滤掉

const decodingMap = {

  '<': '<',

  '>': '>',

  '"': '"',

  '&': '&',

  '

': '\n'

}