一叶扁jiang1. DOM型XSS攻击的本质与危害
DOM型XSS（Cross-Site Scripting）是一种特殊类型的跨站脚本攻击，与传统反射型或存储型XSS不同，它完全在客户端执行，不经过服务器端处理。攻击者通过操纵DOM环境，在用户浏览器中注入恶意脚本。这种攻击的隐蔽性极强，因为恶意代码不会出现在HTTP响应中，常规的WAF和服务器端过滤往往难以防御。
我曾在审计一个电商平台时发现，其商品评论功能通过innerHTML直接渲染用户输入的JSON数据。攻击者只需构造类似{"content":"<img src=x onerror=alert(1)>"}的payload，就能在所有访问该页面的用户浏览器上执行任意JavaScript。更危险的是，这种漏洞常出现在SPA（单页应用）中，因为现代前端框架大量依赖DOM操作。
DOM XSS的典型攻击路径通常包含三个关键环节：
- 攻击入口点：如URL参数（location.hash/search）、postMessage接收器、Cookie等客户端可控输入源
- 危险操作：innerHTML、document.write、eval等不安全的DOM操作方法
- 执行上下文：未正确转义的HTML属性、JavaScript字符串或URL协议
关键区别：传统XSS的恶意代码来自服务器响应，而DOM XSS的恶意代码由客户端JavaScript动态生成。这使得防御策略需要针对性调整。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 主流框架的防御机制剖析
2.1 Vue框架的自动转义机制
Vue作为当前最流行的前端框架，其模板系统默认提供XSS防护。通过v-bind和{{}}插值时，Vue会对内容进行HTML实体转义。例如用户输入<script>alert(1)</script>会被渲染为<script>alert(1)</script>，从而避免脚本执行。
但我在实际项目中遇到过Vue防护失效的典型案例：
javascript复制// 危险用法
<div v-html="userContent"></div>
// 安全用法
<div>{{ userContent }}</div>
当必须使用v-html时，应该配合自定义清理函数：
javascript复制import DOMPurify from 'dompurify'
export default {
methods: {
sanitize(html) {
return DOMPurify.sanitize(html, {
ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],
FORBID_ATTR: ['style', 'on*']
})
}
}
}
2.2 React的JSX设计哲学
React通过JSX的语法设计从根本上改变了DOM操作方式。所有渲染内容在插入DOM前都会被转为字符串，例如：
jsx复制// 安全示例
function SafeComponent({ text }) {
return <div>{text}</div>; // 自动转义
}
// 危险示例
function DangerousComponent({ html }) {
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
在若依(RuoYi)等基于React的后台框架中，我推荐采用以下防御策略：
- 永远优先使用React的props和state管理UI，避免直接DOM操作
- 必须使用dangerouslySetInnerHTML时，结合DOMPurify处理：
javascript复制import { purify } from 'dompurify';
function SanitizedHTML({ content }) {
const clean = purify.sanitize(content, {
USE_PROFILES: { html: true }
});
return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
3. 实战：构建可复用的XSS过滤组件
3.1 基于DOMPurify的过滤方案
DOMPurify是目前最可靠的HTML清理库，其核心优势在于：
- 支持白名单机制（允许的标签和属性）
- 处理各种隐蔽的XSS向量（如SVG、MathML）
- 兼容Node.js和浏览器环境
安装与基础使用：
bash复制npm install dompurify
# 或
yarn add dompurify
封装为Vue组件：
javascript复制<template>
<div v-html="cleanHTML"></div>
</template>
<script>
import DOMPurify from 'dompurify';
export default {
props: {
dirtyHTML: String
},
computed: {
cleanHTML() {
return DOMPurify.sanitize(this.dirtyHTML, {
ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'a'],
ALLOWED_ATTR: ['href', 'title'],
FORBID_CONTENTS: ['script', 'style']
});
}
}
};
</script>
3.2 进阶防御策略
在微前端架构或复杂SPA中，我总结出以下增强方案：
内容安全策略(CSP)
html复制<!-- 示例CSP策略 -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'unsafe-inline' 'unsafe-eval';">
输入验证层
javascript复制// 在表单提交前验证
const xssPatterns = [
/<script[^>]*>([\s\S]*?)<\/script>/gi,
/javascript:[^"']+/gi,
/on\w+="[^"]+"/gi
];
function hasXSS(input) {
return xssPatterns.some(pattern => pattern.test(input));
}
输出编码策略
javascript复制// 针对不同上下文的编码函数
function encodeForHTML(text) {
return text.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
function encodeForAttribute(text) {
return text.replace(/"/g, """)
.replace(/'/g, "'");
}
4. 简历加分项：XSS防御实战案例
4.1 案例一：修复Ruoyi框架的DOM操作漏洞
在若依后台管理系统中，发现用户管理模块存在潜在XSS风险：
javascript复制// 原始危险代码
document.getElementById('userName').innerHTML = userName;
// 修复方案
document.getElementById('userName').textContent = userName;
// 或使用框架方法
this.$refs.userName.textContent = userName;
4.2 案例二：Wepy小程序框架的XSS防护
虽然小程序环境相对封闭，但依然需要注意：
javascript复制// 不安全的数据绑定
<view>{{ rawHTML }}</view>
// 安全做法
<view>{{ filterHTML(rawHTML) }}</view>
// 在wepy中实现过滤器
methods = {
filterHTML(html) {
return html.replace(/</g, '<').replace(/>/g, '>');
}
}
4.3 开源贡献：发布XSS过滤组件
将防御方案封装为npm包是展示技术深度的好方式。以下是关键实现点：
javascript复制// xss-filter.js
export function createFilter(config = {}) {
const defaults = {
stripComments: true,
forbidTags: ['script', 'iframe'],
forbidAttrs: ['onerror', 'onload']
};
const options = { ...defaults, ...config };
return function(input) {
if (typeof input !== 'string') return '';
// 实现过滤逻辑
let output = input;
if (options.stripComments) {
output = output.replace(/<!--[\s\S]*?-->/g, '');
}
options.forbidTags.forEach(tag => {
output = output.replace(
new RegExp(`<${tag}[^>]*>([\\s\\S]*?)<\\/${tag}>`, 'gi'),
''
);
});
return output;
};
}
在项目中使用：
javascript复制import { createFilter } from 'xss-filter';
const filter = createFilter({
forbidTags: ['script', 'style', 'iframe']
});
const clean = filter(userInput);
5. 防御体系构建与测试方案
5.1 分层防御策略
完整的XSS防御应该包含以下层次：
- 输入验证：在表单提交时进行基础校验
- 存储净化：入库前清理危险内容
- 输出编码：根据输出上下文（HTML/JS/URL）采用不同编码
- 运行时监控：通过MutationObserver检测可疑DOM修改
5.2 自动化测试方案
在CI/CD流程中加入XSS测试：
javascript复制// Jest测试用例
describe('XSS防御测试', () => {
const payloads = [
'<script>alert(1)</script>',
'<img src=x onerror=alert(1)>',
'javascript:alert(1)'
];
payloads.forEach(payload => {
test(`应过滤 ${payload}`, () => {
const clean = xssFilter(payload);
expect(clean).not.toEqual(payload);
expect(clean.indexOf('script')).toBe(-1);
});
});
});
5.3 真实漏洞挖掘技巧
在安全审计时，我常用的DOM XSS测试方法：
- 源代码分析：搜索innerHTML、outerHTML、document.write等危险API
- 动态追踪：使用Chrome开发者工具的DOM断点功能
- 变异测试：尝试各种编码方式的payload：
%3Cscript%3Ealert(1)%3C/script%3E\u003Cscript\u003Ealert(1)\u003C/script\u003E<scr<script>ipt>alert(1)</scr</script>ipt>
6. 前沿防御技术探索
6.1 Trusted Types API
Chrome推出的新特性，可以强制类型检查：
javascript复制// 启用策略
if (window.trustedTypes) {
const policy = trustedTypes.createPolicy('default', {
createHTML: input => DOMPurify.sanitize(input)
});
}
// 使用方式
el.innerHTML = trustedInput; // 必须通过策略创建
6.2 基于AST的静态分析
使用ESLint插件检测危险模式：
javascript复制// .eslintrc.js
module.exports = {
plugins: ['security'],
rules: {
'security/detect-dangerous-html': 'error',
'security/detect-eval-with-expression': 'error'
}
};
6.3 WebAssembly沙箱
对高危险操作使用Wasm隔离：
javascript复制// xss-filter.wasm
export function sanitize(inputPtr, length) {
// 在Wasm内存中处理字符串
// 返回清理后的指针
}
// JavaScript调用
const instance = await WebAssembly.instantiateStreaming(
fetch('xss-filter.wasm')
);
const clean = instance.exports.sanitize(userInput);
在实际项目中，我建议将这些技术组合使用形成深度防御。比如在Vue项目中同时采用：
- 模板自动转义
- v-html时使用DOMPurify
- 部署CSP策略
- 启用Trusted Types
- 在CI中加入XSS测试用例
这种多层次防御能有效应对各种变种的DOM XSS攻击，包括最新的基于Shadow DOM或Web Components的攻击向量。