JavaScript 怎么处理接口返回的富文本内容进行 XSS 过滤-js教程-PHP中文网

必须先用js-xss等白名单过滤器净化再渲染，核心是不信任任何后端返回的html；推荐后端过滤+前端兜底，配置严格白名单并配合csp纵深防御。

javascript 怎么处理接口返回的富文本内容进行 xss 过滤

接口返回的富文本内容不能直接渲染，必须先过滤再展示。核心原则是：不信任任何后端返回的 HTML 字符串，哪怕它看起来“干净”。真实攻击常绕过简单正则或标签黑名单，所以得用成熟、可配置的白名单过滤器。

用 js-xss 做服务端/前端统一过滤

js-xss 是目前最轻量且可靠的富文本 XSS 过滤方案之一，支持精细控制白名单，适合前后端协同使用。

后端返回前过滤（推荐）：在 Node.js 或 Java 等服务端集成 js-xss 或等效库（如 Java 的 Jsoup），对 content 字段做一次净化，再返回给前端
前端二次兜底（可选）：即使后端已处理，前端在调用 wxparse、v-html 或 innerHTML 之前，仍用 js-xss 再过一遍——尤其适用于小程序、H5 或 SSR 场景中无法完全信任后端的情况
关键配置示例（保留常见排版，禁用高危属性）：

const xss = require('xss');<br>const options = {<br>  whiteList: {<br>    p: ['style'],<br>    span: ['style'],<br>    strong: [],<br>    em: [],<br>    u: [],<br>    img: ['src', 'alt', 'width', 'height'],<br>    a: ['href', 'title'],<br>    br: [],<br>    ul: [],<br>    ol: [],<br>    li: []<br>  },<br>  stripIgnoreTag: true,           // 删除非白名单标签<br>  stripIgnoreTagBody: ['script', 'style'], // 清空 script/style 标签内容<br>  onTagAttr: (tag, attr, value) => {<br>    if (attr.startsWith('on') || attr === 'style' || /javascript:|data:/i.test(value)) {<br>      return false; // 拦截所有 onxxx 事件、内联 style、危险协议<br>    }<br>  }<br>};<br>const cleanHtml = new xss.FilterXSS(options).process(dirtyHtml);

避免用错上下文导致转义失效

富文本本质是 HTML 片段，但它的插入位置决定了防护方式是否有效。不能只靠一次“过滤”就万事大吉。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

如果用 v-html 或 innerHTML 渲染，必须确保内容已通过 js-xss/DOMPurify 过滤，且白名单严格——因为此时浏览器会真正解析 HTML
如果只是显示纯文本（比如摘要预览），优先用 textContent 或 innerText，自动跳过所有标签解析，零风险
不要把富文本塞进 script 标签 或 URL 属性 中：例如 <a href="%24%7Bhtml%7D"></a>，这种写法即使内容已过滤，也可能因引号缺失或属性未闭合引发新漏洞

搭配 CSP 形成纵深防御

js-xss 解决的是“内容本身是否安全”，而 CSP 解决的是“就算有漏网之鱼，它能不能执行”。两者缺一不可。

设置响应头：Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self';
明确禁止 unsafe-inline 和 unsafe-eval，防止内联脚本和动态执行
对富文本中允许的 <a href></a>，额外校验协议：只放行 http://、https://、mailto:，js-xss 的 onTagAttr 可配合实现

别忽略富文本来源的可信度

很多 XSS 漏洞不是出在过滤逻辑，而是出在“以为某段内容是可信的”。

后台编辑器导出的 HTML ≠ 安全 HTML。CMS 或低代码平台生成的内容可能包含被绕过的 payload，比如 <img src="1" onerror="alert(1)">
缓存、CDN、中间代理返回的数据也可能被污染，不能因“上次没出问题”就跳过过滤
前端 localStorage、sessionStorage 里存的富文本，读取后同样要过滤——它们也是用户可控输入

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南