多条件筛选本身不引入XSS风险，真正危险的是将用户输入的筛选值（如关键词、排序字段）未经转义直接拼入HTML或JS上下文；输出环节必须对filterValue、sortField等变量做上下文感知的编码或白名单校验，否则即成反射型或存储型XSS入口。
多条件筛选本身不引入XSS风险，真正危险的是把用户输入的筛选值（比如关键词、分类ID、排序字段）未经处理就拼进HTML或JS上下文里。只要输出环节没做对应转义，filterValue、sortField、category 这类变量都可能成为XSS入口。
动态拼接HTML时必须用textContent或转义后赋值innerHTML
常见错误是把筛选参数直接插进模板字符串再塞给 innerHTML：
const keyword = userInput; // 来自URL参数或表单
container.innerHTML = `<div>搜索结果：${keyword}</div>`; // 危险！
如果 userInput 是
- 纯文本展示一律用
textContent：container.textContent = `搜索结果：${keyword}` - 确实要渲染HTML（如高亮关键词），先转义再拼：
const escaped = keyword.replace(/[&"']/g, c => ({'&': '&', '': '>', '"': '"', "'": '''}[c])); - 更稳妥的做法是交给DOMPurify：
container.innerHTML = DOMPurify.sanitize(`，但注意它默认不处理属性上下文里的值搜索结果：${keyword}`);
筛选参数传入JavaScript逻辑前要校验类型和范围
前端常把筛选条件作为对象传给请求函数或排序逻辑，比如：{ category: 'news', sort: 'date', limit: 20 }。看似安全，但如果 sort 字段来自用户输入且没约束，就可能被设成 date"; alert(1); "，后续若用 eval() 或拼字符串执行，立刻中招。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 对字符串类筛选字段（如
sort、category）只允许白名单值：if (!['date', 'title', 'author'].includes(sort)) throw new Error('Invalid sort field'); - 数字类字段（如
limit、page）强制转为整数并设上限：Math.min(parseInt(page, 10) || 1, 100) - 禁止把筛选参数直接拼进
new Function()、setTimeout(string)、setInterval(string)等动态执行API
URL参数用于筛选时，不能直接document.write或innerHTML插入
从 location.search 解析出的参数（如 ?q=<script>alert(1)</script>&cat=tech）是典型反射型XSS温床。很多人会直接取 q 值显示在页面上，甚至写进 document.title。
- 读取URL参数后，先用
decodeURIComponent()解码，再立即转义（不是过滤）：const q = escapeHtml(getQueryParam('q')); - 不要用
document.write()输出任何URL参数——这个API早已过时且极度危险 - 如果要把参数回显到搜索框，用
input.value = q安全；若需在HTML中显示，走textContent或转义后innerHTML - 服务端渲染场景下，务必在模板中对所有动态插入的参数调用转义函数，例如Jinja2的
{{ q|e }}、Twig的{{ q|escape }}
富文本筛选结果页更要严防DOM XSS
当筛选返回的是带格式的内容（比如商品描述、文章摘要），且前端用 innerHTML 渲染，就进入高危区。攻击者可能在原始数据里埋入
- 服务端必须净化——不能只靠前端DOMPurify。PHP用
HTMLPurifier，Java用jsoup，Node.js用sanitize-html，配置严格白名单（禁用script、iframe、on*属性、javascript:协议） - 前端拿到净化后的HTML，仍建议再过一遍DOMPurify，防止服务端漏掉边缘case
- 避免在筛选逻辑里动态生成内联事件，比如：
button.onclick = () => doSort('${unsafeField}')—— 改用 data 属性 + 事件委托
最易被忽略的一点：筛选接口返回的JSON数据里如果包含HTML片段，前端开发者常误以为“JSON是安全的”，直接 innerHTML = res.html。其实JSON只是传输格式，内容本身仍是未消毒的HTML字符串。是否危险，取决于你怎么用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
