Question

我正在学习React：完全是新手。

如果我直接从draft.js保存数据库中的HTML（或者它的变体总是基于它），然后在我的React SPA的视图页面中，我通过我的API从DB中检索HTML：

问题：

如何呈现该HTML？
dangerouslySetInnerHTML？或者也许其中一个（你有什么建议？）？
我读过＆＃34; sanitize＆＃34;，＆＃34;保护HTML＆＃34;等字样。但是怎么样，有一个图书馆？
当我将其保存在数据库中或之后，当我将其渲染时，我需要保护draft-js中的html吗？

Answer 1

Draft-JS不允许您直接从当前foreach ($xml->children() as $a) { if ((string)$a->id === "1") { $a->addChild("phone", "12345678"); } }生成HTML，这是一件好事。由于您没有处理“原始HTML”，因此如果有人在编辑器中插入脚本，则不必处理XSS攻击，因为草稿编辑器内部状态不会被更改。

Draft JS允许您导出当前的Editor状态，以便您可以轻松存储它。可以使用

完成

EditorState

在您的import {convertToRaw} from 'draft-js';处理程序中，您只需执行

即可

onChange

您可以根据需要存储此JSON以供将来使用。

现在有了这个渲染，你有两个选择：

从存储的EditorState生成HTML。

这可以使用像https://www.npmjs.com/package/draft-js-export-html这样的库来完成。您可能希望避免这种情况，因为我认为下一个选项更好。
使用此EditorState作为只读DraftJS编辑器的默认值组件。

你需要来自DraftJS Library的const editorJSON = JSON.stringify(convertToRaw(EditorState.getContents()));，然后你就像这样制作一个Nice StateLess React Component
```
convertFromRaw
```
现在您可以使用它来显示您的内容。您还可以传递装饰器和自定义映射函数，通常是传递给普通编辑器的所有内容，并且可以在不丢失样式和繁琐处理HTML的情况下呈现内容。

Answer 2

不要相信用户！

你应该关心的第一件事是“不要相信你的用户”。

如果您的“HTML”由您的服务器呈现，并且用户无法修改，则完全可以。因为您渲染/保存的HTML是完全安全的并且由您自己管理，并且如果它被确定为“安全”HTML，您是否将它（html）放入DOM中根本不是问题。

但问题是，大多数WYSIWYG编辑器 - 如draft.js - 使“HTML”文件不是TEXT。我想你的担心也来自这里。

是的，这很危险。我们能做的不是直接渲染HTML而是“选择性”HTML渲染。

危险标签：<script>，<img>，<link>等。

你可以删除那些标签但是当你决定允许哪些标签时它会更安全，如下所示：

安全标记：<H1> - <H6> / span / div / p / ol ul li / {{1} } ...

并且您应该删除那些HTML元素的属性，例如table等。

因为它也可能被用户滥用。

结论：

那么当我们使用WYSIWYG编辑器时我们能做些什么呢？

有两大策略：

在安全数据库时生成“安全”HTML。
在将其放入DOM之前生成“安全”HTML。（3.在将html发送到客户端之前生成“安全”HTML，但不是你的情况！）

如果您想确保数据库的文本完全安全，请选择第一个。

第一个必须在您的服务器中处理（不是浏览器/客户端！），您可以在python中使用许多解决方案，如onclick=""，或在nodejs中使用BeautifulSoup。

如果您的网络应用程序很复杂，并且大多数服务的业务逻辑都在前端运行，请选择第二个。

第二个是在将HTML安装到DOM之前使用HTML转义包。仍然sanitize-html可以是一个很好的解决方案。（当然有更好的解决方案！）您可以决定HTML中的标签/属性/值。

链接

https://github.com/punkave/sanitize-html

渲染从draft-js

2 个答案:

不要相信用户！

结论：

链接