自研富文本编辑器通过闭包实现安全审计切面,将校验逻辑封装为可复用、状态隔离、上下文明确的函数单元,支持白名单控制、动态扩展、上下文感知、结构化反馈与审计日志。

在自研富文本编辑器中,利用闭包做安全审计切面,核心不是“一键”,而是把内容校验逻辑封装成可复用、状态隔离、上下文明确的函数单元。它不依赖全局变量,也不污染编辑器主流程,而是在关键出口(如提交前、粘贴后、API调用时)自动注入校验能力。
闭包用于封装校验策略与白名单规则
把 HTML 标签过滤、属性限制、协议校验等规则收进一个立即执行函数,返回带记忆能力的校验函数:
- 例如:只允许 、、
- 闭包内部维护一份不可篡改的白名单对象(如 const allowedTags = new Set(['p', 'strong', 'em'])),外部无法直接修改,避免运行时被绕过
- 支持动态扩展:通过闭包返回的 addTag() 方法,在初始化阶段按需注册业务特有标签(如
),不影响基础校验逻辑
在提交入口处用闭包包装内容获取逻辑
不要让表单提交直接读取原始 HTML 字符串,而是统一走一个受控通道:
- 定义 safeContentGetter = (editorInstance) => { ... },该函数由闭包生成,自带 DOM 解析、节点遍历、事件属性剥离、内联样式审查等步骤
- 调用时传入当前编辑器实例,闭包自动识别其 contenteditable 区域、过滤 data-readonly 节点、跳过 widget 占位符(如图片卡片、代码块容器)
- 对含风险内容(如未转义的双大括号 {{}}、可疑 base64 字符串)不仅删除,还记录违规类型和位置,供审计日志使用
结合编辑器状态做上下文感知校验
纯 HTML 过滤不够——同一段 HTML 在不同区域含义不同。闭包可捕获并绑定当前编辑器状态快照:
- 例如:在表格单元格中粘贴的内容,应禁止 ;在评论区允许 ,但在公告栏则强制移除 href 属性
- 闭包初始化时接收 contextRules 参数,如 { table: { deny: ['h1', 'script'] }, notice: { sanitizeAttrs: ['href'] } },后续每次校验都自动匹配当前光标所在节点路径
- 若检测到用户正处在代码块中(pre>code),直接跳过所有富文本清洗,仅做字符长度和换行控制,避免破坏语法结构
失败时提供可操作反馈而非静默截断
闭包返回的校验结果应是结构化对象,包含 cleanHtml、warnings、blockedNodes 等字段:
-
warnings 数组列出每处风险(如“第3行:
标签缺少 alt 属性”“检测到 javascript:alert(1) 协议”),前端可高亮对应编辑区位置
- 若内容被大幅清洗,不直接提交空字符串,而是调用 editor.insertText(cleanHtml) 并弹出轻提示:“已自动清理不安全格式,点击查看修改详情”
- 支持审计回溯:每次校验生成唯一 traceId,连同用户 ID、时间戳、原始内容哈希一并写入日志,便于事后关联分析攻击尝试











