富文本入库的安全边界：白名单过滤、XSS 防护与图片外链防盗

只要后台有富文本编辑器，就必须回答一个问题：用户（包括管理员）粘贴进来的 HTML，哪些能留、哪些必须去掉。 这不是理论问题。我们见过客户从 Word 里粘一段文字，带进来一堆 <o:p> 标签和 style="mso-..." ；也见过从别的网站复制内容，带进 <script> 和 onerror 属性。 第一层：入库前白名单过滤 不要用黑名单（过滤 script、iframe 这些词）。黑名单永远漏，变形写法太多。用白名单：只允许明确列出的标签和属性，其余一律剥掉。 我们允许的标签集合： p br strong b em i u h2 h3 h4 ul ol li blockquote a img figure figcaption table thead tbody tr th td code pre hr 允许的属性只有： a[href][title][target][rel] 、 img[src][alt][width][height] 、 td[colspan][rowspan] 。其它属性（style、class、id、on*）全部去掉。 特别注意 style ：如果允许 style， style="background:url(javascript:...)" 这类老漏洞仍然有效。要保留排版，用固定的 class 映射，而不是让用户自由写样式。 第二层：链接协议限制 href 只允许 http: 、 https: 、 mailto: 、 tel: 和站内相对路径。要显式拦掉 javascript: 和 data: —— <a href="javascript:alert(1)"> 是最经典的 XSS 入口。 img src 只允许 http: 、 https: 和站内路径，拦掉 data: （可以塞 SVG 脚本）。 第三层：输出时再处理一次 有人觉得入库过滤就够了。但数据库里的历史数据可能是在过滤规则上线前存的，或者被别的途径写进去的。所以前端渲染 v-html 之前，最好再过一遍同样的白名单。 我们现在的做法： 入库时过滤一次（防止脏数据沉淀）； 出库渲染时用同一份规则再清洗一次（防止历史数据）； 对 a[target=_blank] 自动补 rel="noopener noreferrer" ，防止 window.opener 劫持。 第四层：图片处理，不只是一个安全问题 富文本里的图片有三类风险： 外链图片失效 ：用户直接引用别人网站的图，对方一删，你的文章就变成一片空白； 外链图片被替换 ：更糟的情况是对方把图换成不相关内容； 外链图片拖慢页面 ：对方服务器慢，你的文章加载就慢。 我们的规则是：上传的图片存本地，路径统一为 /uploads/yyyyMM/文件名 ；编辑器里粘贴的外链图片，提示用户下载后重新上传；确实需要外链的，加 loading="lazy" 和 referrerpolicy="no-referrer" 。 编辑器层面还能做的 粘贴时只取纯文本或受限 HTML（监听 paste 事件，读 text/html 后清洗再插入）； 禁用「查看源码」模式，避免管理员绕过工具栏手写标签； 插入图片统一走上传接口，不在编辑器里做 base64 内嵌（base64 会让单篇文章体积暴涨到几 MB）。 一个简单的验证方法 保存一篇测试文章，正文里放这几段： <script>alert(1)</script> <img src=x onerror=alert(1)> <a href="javascript:alert(1)">click</a> <div style="background:url(javascript:alert(1))">x</div> 保存后重新打开，看数据库里存的是什么、页面上渲染出什么。如果 script 标签还在、 onerror 属性还在，说明过滤没生效。 安全这件事没有「做完」的时刻，但只要把入口管住、把输出兜住，绝大多数问题都能挡住。

孝感实诚网络科技有限公司（实诚科技）专注网站建设、小程序开发、管理系统定制与软件工具开发，咨询热线 13622369854。