Flutter应用基于flutter_quill实现富文本的存储与安全最佳实践

我开发了一款Flutter应用，需要为用户添加富文本编辑/发布功能，选用了flutter_quill库——它基于Delta文档实现，能轻松与JSON格式互转，易用性表现良好。

尽管Flutter是移动开发框架，但flutter_quill采用HTML、CSS等Web技术渲染富文本，因此同样存在XSS攻击风险。若允许用户输入任意HTML或JavaScript代码，必须在客户端和服务端同时进行输入清理操作，但我不确定仅依赖库的内置清理功能是否足够，特此请教富文本存储格式与安全防护的最佳实践。

技术栈 #

• 客户端：Flutter（Dart）+ Quill
• 服务端：Node.js + SQL数据库

方案一：存储Delta JSON格式 #

存储方式 #

直接将Quill生成的Delta内容以JSON格式存储在SQL数据库中。

安全措施 #

• 服务端在存储前对JSON内容进行清理
• 客户端将内容加载到Quill编辑器前再次执行清理

相关疑问与结论 #

问：以JSON格式存储是否可行？
答：如果计划长期使用Quill编辑器，JSON是合适的选择——格式灵活，可按需转换为其他格式，但必须在存储和客户端使用前完成数据清理，可借助DOMPurify、SafeValue这类工具实现。

问：推荐的JSON清理方式是什么？
答：JSON结构复杂，清理难度较高，可使用上述提及的工具库，或自行编写清理函数，核心逻辑是移除可被用于执行恶意代码的危险标签与属性。

问：XSS攻击中常用的危险标签与属性有哪些？
答：
危险标签：

<script>
<iframe>
<img>
<object>
<embed>
<video>
<audio>
<svg>

危险属性：

onload
onerror
onmouseover
onclick
onfocus
onblur
style
href
src
background
data
/>

问：服务端清理内容时，能否先转为HTML、清理后对比前后HTML，仅当无差异时才保存JSON？
答：这种方式能确保清理过程未篡改有效数据，但会增加系统开销，需要权衡收益与额外处理时间。

方案二：存储HTML格式 #

存储方式 #

客户端先将Delta转换为HTML，清理后发送至服务端；服务端再次执行清理后，将HTML存储到数据库。客户端获取帖子内容后，需先清理再渲染。

安全措施 #

• 存储前后端均需执行HTML清理
• 客户端渲染内容前再次进行清理

相关结论 #

如果需要频繁以HTML格式展示内容，这种存储方式较为合适——HTML兼容性好，多数设备无需额外处理即可直接展示。但缺点明显：Quill编辑器无法直接使用HTML内容，需要将HTML转回Delta格式，这个过程复杂且耗时，甚至可能丢失部分格式。如果需要支持频繁编辑操作，可能需要同时存储HTML与Delta格式，会增加系统复杂度。

请求建议 #

希望得到针对上述两个方案的评估意见，或者更具实用性与安全性的替代方案。

内容的提问来源于stack exchange，提问作者Ahmad Shabeeb