Web 安全之 XSS 攻击原理/分类/防御 详解

什么是 XSS 攻击？

• 全称 Cross-Site Scripting 跨站脚本攻击，简写为了避免和 CSS 冲突而改成 XSS
• 原理：通过在浏览器可输入的地方（比如评论栏、搜索栏、地址栏等）注入脚本（JS、HTML 代码块等），获取用户的 cookie、sessionID 等信息，从而对网站数据造成破坏或者窃取。

常见注入方式

这样说可能有些不好理解，没关系，先留个印象，看后续实例就好

注入的代码可执行，从而产生效果

• 在 HTML 内嵌的文本中，以 script 标签形式注入
• 在内联的 JS 中，拼接的数据突破了原本的限制（字符串、变量、方法名等）
• 在标签属性中，恶意加入引号，注入其他属性或标签
• 在标签的 href、src 等属性中，添加 JS 可执行代码
• 在 onload、onerror、onclick 等事件中，注入代码

XSS 攻击分类

反射型 XSS

• 一般是返回一个构造好的 URL 给服务器，形成攻击
• 举例

比如用户提交表单中含有 text 字段：<script>alert(1)</script>
则 URL 为 www.foolrBird.com?text=<script>alert(1)</script>
然后浏览器就会输出 1
这里假如替换成其他破坏性的可执行代码可想而知

比如 www.foolBird.com/delete 接口是一键删除所有数据
用户访问了恶意链接 www.foolBird.com/delete，而服务器又没有限制用户权限，直接导致数据被删除（是认证的用户访问链接，所以被信任）

存储型 XSS（或持久性 XSS）

一听这名字就知道危害巨大，存储在数据库中，可以持续造成破坏

1. 攻击者将恶意代码提交到目标网站的数据库中
2. 用户访问时，服务端将恶意代码取出拼接在 HTML 中返回给浏览器执行
3. 恶意代码窃取用户数据后发送到攻击者网站（或冒充用户），调用目标网站接口进行操作

• 该方式危害最大。不需要用户主动触发，任何允许用户存储数据的网站都可能有被攻击的可能

DOM 型 XSS

• 诱骗用户访问攻击者构造的URL，利用脚本生成一个 DOM 节点插入到当前网站的 HTML 文件中，形成攻击。这和反射型很相似，唯一区别是构造的 URL 不用发送到服务器，可以达到绕过WAF（Web Application Firewall，网站应用级入侵防御系统）从而躲避服务器检测的目的

想深入了解具体应用场景可以参考[DOM-XSS 攻击原理与防御](DOM-XSS攻击原理与防御 - Mysticbinary - 博客园 (cnblogs.com))

XSS 防御

只要能输入并提交数据的地方都可能存在 XSS 危险

常用

• HttpOnly：在 cookie 中设置该属性后，JS 脚本（比如 document.cookie）将无法读取 cookie，只能服务器端修改。
• 输入过滤：比如要求邮箱、电话、用户名等按固定格式输入。这个过滤前端后端都应该做，双重保险
• 转义 HTML：对引号、尖括号、斜杠进行转义。最好是选择合适的转义库，比较完整。例如 xss 库，npm i xss -S 即可安装

防御存储型和反射型

• 纯前端渲染，代码和数据分离

防御 DOM 型

一般因为前端代码不够严谨，把不可信数据当代码执行

• 多用 innerText/textContent、setAtrribute 等

  • 将 innerHTML、outerHTML 替换为 innerText/textContent，它会自动将 HTML 标签解析为普通文件

• Vue、React 不使用v-html/dangerouslySetInnerHTML

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~

如需转载，请注明出处foolBirdd