渲染保存在草稿中的html -js
我正在学习React:完全是新手。
如果我直接从draft.js (或者它的变体总是基于它)将HTML保存到DB中，然后在我的React SPA的视图页面中，我通过我的应用程序接口从DB中检索HTML：
问题：
如何呈现该
- ？
- dangerouslySetInnerHTML？或者是其中的一个(你有什么建议？)？
- [https://github.com/wrakky/react-html-parser](https://github.com/wrakky/react-html-parser)
- [https://github.com/pveyes/htmr](https://github.com/pveyes/htmr)
- [https://github.com/remarkablemark/html-react-parser](https://github.com/remarkablemark/html-react-parser)
- [https://github.com/utatti/react-render-html](https://github.com/utatti/react-render-html)
- [https://github.com/aknuds1/html-to-react](https://github.com/aknuds1/html-to-react)
- 我读到了像“清理”，“保护超文本标记语言”这样的词。当我将html保存到DB中或之后，当我渲染它时，我需要从
-js中保护html？
回答 2
Stack Overflow用户
发布于 2018-03-10 00:13:37
Draft-JS不允许直接从当前的EditorState生成超文本标记语言，这是一件好事。由于您不是在处理“原始HTML”，因此您不必处理XSS攻击，因为如果有人在编辑器中插入脚本，则草稿编辑器的内部状态不会改变。
Draft JS允许您导出当前的Editor状态，以便您可以轻松存储。可以使用以下命令完成此操作
import {convertToRaw} from 'draft-js';在onChange处理程序中，您可以简单地执行以下操作
const editorJSON = JSON.stringify(convertToRaw(EditorState.getContents()));您可以随心所欲地存储此JSON以供将来使用。
现在，要渲染此对象，您有两个选项：
从存储的EditorState中
- Generate HTML。
这可以使用像https://www.npmjs.com/package/draft-js-export-html这样的库来完成。您可能希望避免这种情况，因为在我看来，下一个选项是将此EditorState better.
- Use为只读DraftJS编辑器组件的默认值。
您将需要来自DraftJS库的convertFromRaw，然后创建一个很好的StateLess React组件，如下所示
从‘React’导入react；从‘ConvertFromRaw(JSON.parse(props.storedState))；-js’导入{Editor，ConvertFromRaw}；const ReadOnlyEditor = (props) => { const storedState =react storedState( )；}
现在，您可以简单地使用它来显示您的内容。您还可以传递您的装饰器和自定义映射函数，通常是传递给普通编辑器的所有内容，并且可以呈现内容，而不会丢失样式，也不会繁琐地处理HTML语言。
Stack Overflow用户
发布于 2018-03-08 22:41:08
不要相信用户！
你应该关心的第一件事是“不要相信你的用户”。
如果你的'HTML‘是由你的服务器呈现的，并且不能被用户修改，这是完全正常的。因为呈现/保存的HTML是完全安全的，并且由您自己管理，而且如果它被确定为“安全的”HTML，那么您是否将其(Html)放入DOM中根本不是问题。
但问题是，大多数所见即所得编辑器--如draft.js- -生成的是“超文本标记语言”文件，而不是文本。我想你的担忧也来自这里。
是的，这很危险。我们能做的不是直接渲染HTML，而是“选择性”渲染HTML。
危险标签：<script>、<img>、<link>等
您可以删除这些标记，但当您决定允许哪些标记时，可能会更安全，如下所示：
安全标签：<H1> - <H6> / span / div / p / ol ul li / table...
你应该删除那些超文本标记语言元素的属性，比如，onclick=""，等等。
因为它也可能被用户滥用。
结论：
那么当我们使用WYSIWYG编辑器时，我们能做些什么呢？
有两个大的策略：
在将“安全”的超文本标记语言放入DOM之前，如果对“安全”的超文本标记语言是安全的，
- 会生成“安全”超文本标记语言。(3.在将HTML发送到客户端之前生成“安全”的html，但在您的情况下并非如此！)
如果你想确保数据库的文本是完全安全的，请选择第一个。
第一个必须在你的服务器上处理(不是浏览器/客户端！)，你可以使用很多解决方案，比如python中的BeautifulSoup，或者nodejs中的sanitize-html。
如果你的web-app很复杂，并且你的服务的大部分业务逻辑都在前端运行，那么选择第二个。
第二种方法是在将HTML挂载到DOM之前使用HTML转义包。尽管如此，sanitize-html仍然是一个很好的解决方案。(当然，还有更好的解决方案！)您可以决定HTML中的哪些标记/属性/值。
链接
https://stackoverflow.com/questions/49174692
复制相似问题