Cherry-Markdown 新增 style 属性过滤功能解析

在富文本编辑器与Markdown解析器的开发中，安全性始终是需要重点考虑的环节。近期 Cherry-Markdown 项目针对用户输入内容中的潜在安全风险，新增了对HTML标签style属性的过滤能力，这一特性对于聊天室、论坛等UGC（用户生成内容）场景尤为重要。

功能背景

在实际应用场景中，用户可能通过输入类似<h1 style="color: red; font-size: 40px">Test</h1>的HTML片段来改变内容样式。虽然这能实现个性化展示，但也带来了两个主要问题：

1. 视觉一致性破坏：用户自定义样式可能破坏平台整体的视觉设计规范
2. 潜在安全风险：style属性可能被恶意利用进行XSS攻击（如通过expression()等CSS函数执行脚本）

技术实现

Cherry-Markdown 通过新增配置项实现了这一功能：

new Cherry({
    engine: {
        syntax: {
            htmlBlock: {
                // 是否过滤html标签中的style属性
                filterStyle: true, // true为过滤，false为保留
            }
        }
    }
})

当filterStyle设置为true时，解析器会在处理HTML块时自动移除所有标签的style属性，确保输出的HTML是干净且安全的。

设计思考

虽然开发者也可以在前端输入时限制或在后端进行XSS过滤，但在Markdown解析层实现这一功能有几个优势：

1. 防御纵深：在多个层级（前端、解析器、后端）都进行过滤，提高整体安全性
2. 处理一致性：确保不同来源的内容（如直接粘贴、API获取等）都经过相同规则处理
3. 性能优化：在解析阶段处理比在后端过滤更高效

最佳实践建议

对于需要高度安全性的场景，建议采用组合策略：

1. 前端输入限制（如禁用特定HTML标签）
2. 启用Cherry-Markdown的style过滤
3. 后端补充XSS过滤
4. 内容展示时使用CSP（内容安全策略）进一步防护

对于需要保留部分样式的场景，可以考虑：

• 使用白名单机制只允许特定CSS属性
• 通过自定义CSS类替代内联样式
• 实现专门的样式编辑器而非直接输入HTML

总结

Cherry-Markdown新增的style过滤功能为开发者提供了更完善的内容安全解决方案。这一特性的加入使得项目在保持Markdown灵活性的同时，更好地满足了企业级应用对安全性和一致性的要求。开发者可以根据实际需求灵活配置，构建更安全可靠的富文本处理流程。