在应用程序中支持 RichText 的最佳实践是什么?

问题描述 投票:0回答:0

我有一个 flutter 应用程序,我想为用户添加对 RichText 的支持。
用户在第一次创建帖子时或稍后决定要编辑帖子时应该能够使用 RichText 编辑器。

我选择使用 flutter_quill 库。这是一个很棒的图书馆,而且相当容易使用,图书馆提供或使用 Delta 文档。 Delta 文档可以很容易地从/到编码的 json 转换。

虽然 Flutter 是一个移动开发框架,它的应用程序通常运行在移动设备上而不是在 Web 浏览器中,但是 flutter_quill 包使用 Web 技术(例如 HTML 和 CSS)来表示富文本,它可能容易受到 XSS 攻击以与 Web 应用程序相同的方式进行攻击。

特别是,如果我允许用户输入任意 HTML 或 JavaScript 代码,则对输入进行清理以防止恶意代码被注入应用程序非常重要。这可以在客户端和服务器端完成。

flutter_quill 包提供了一些内置的清理功能来防止恶意代码被包含在富文本内容中,但我不知道我是否只能依靠它。

所以我正在寻找存储格式和安全性方面的最佳实践。

技术栈:

  • 客户端:Flutter 应用,Dart with Quill
  • 服务器:Nodejs + SQL DB

我考虑过多种解决方案,我列出了一些我的发现

解决方案#1

存储: 内容将以 json 形式存储在数据库中
安全性: 我们需要在存储到数据库之前清理 json。并在客户端的 Quill 中使用它之前清理 json。

将数据库中的内容保存为 json 是个好主意吗?

如果您打算长期使用 Quill 编辑器,将内容作为 JSON 存储在数据库中是个好主意。 JSON 是一种灵活的格式,可以根据需要轻松转换为其他格式。但是,您需要先清理 JSON 数据,然后再将其存储在数据库中以及在客户端中使用它,以避免出现安全问题。有一些很好的 JSON 清理库,例如 DOMPurify 和 SafeValue。

清理 json 的推荐方法是什么?

清理 JSON 可能很棘手,因为 JSON 可以包含复杂的数据结构。您可以使用上述库来清理数据,也可以编写自己的清理函数。主要思想是去除任何可用于执行恶意代码的危险标签或属性。

你能给我一份XSS攻击中常用的标签和属性列表吗 标签:

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

属性:

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

当我想在服务器端清理内容时,是否可以依靠转换为HTML,清理HTML,比较清理前后的HTML,只有比较没有差异才将内容保存为json

比较清理前后的 HTML 是确保清理过程不会更改数据的好主意。但是,这会给您的系统增加一些开销,因此您需要权衡这种方法的好处与额外的处理时间。

解决方案#2:

在此解决方案中,客户端会将 Delta 转换为 HTML,对其进行清理并将其发送到服务器。然后服务器再次对其进行清理并将其保存在数据库中。
稍后当客户端获取帖子时,客户端应在呈现之前清理 HTML。

存储: 内容将以 HTML 格式存储在数据库中
安全性: 我们需要在存储到数据库之前清理 HTML。并在客户端中使用之前清理 HTML。

如果您需要经常以 HTML 格式显示内容,那么将内容以 HTML 格式存储在数据库中是个好主意。这种格式易于使用,无需任何额外处理即可在大多数设备上显示。但是,您需要在将 HTML 数据存储在数据库中之前以及在客户端中使用它之前对 HTML 数据进行清理,以避免出现安全问题。

这种方法的主要问题是您不能直接在 Quill 编辑器中使用 HTML。您需要将 HTML 转换为 Delta 格式,这可能既复杂又耗时,甚至可能无法实现。如果您需要经常编辑内容,您可能需要以 HTML 和 Delta 格式存储内容,这会给您的系统增加额外的复杂性。

任何关于这些解决方案的想法和想法都非常感谢,我很乐意讨论这些解决方案或任何其他可以提供更多实用性和安全性的解决方案。

flutter xss quill richtext
© www.soinside.com 2019 - 2024. All rights reserved.