如何创建一个显示格式化用户生成文本的react网站？

Question

假设你想在你的网站上显示文字。也许它是一个博客或一个网站，像一个媒体，甚至是堆栈溢出。你希望用户能够提交他们的写作。格式化文本(使某些部分粗体或斜体)，在文本之间插入图片，等等。

你会怎么做呢？我想我可以找出一些麻木不仁的方法来做这件事，但是做这种网站的最佳做法是什么呢？

Answer 1

如果您使用的是无头CMS，wysiwyg编辑器，标记编辑器，.您很可能会以string的形式返回HTML，您需要输出它。

正如您可能已经注意到的，因此，您不能只在您的React组件中输出<div>{html}</div>。这是因为React 转义某些字符以防止XSS。

为了显示用户提交的HTML，您可以使用https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml。这个奇怪名称的原因是您将允许用户输出不安全的HTML，这可能会在您的网站上执行JavaScript或网络请求。这可以有巨大的安全后果。您必须通过一个清除器运行HTML，它将删除可以用于执行JavaScript和转义字符的任何HTML属性，就像React那样。不要试图自己做这件事，人们不断地寻找新的方法来绕过这些消毒液。

您可以使用的消毒液：

• https://github.com/cure53/DOMPurify
• https://github.com/apostrophecms/sanitize-html

电子邮件应用程序有时会使用沙箱iframe显示来自电子邮件的原始HTML，但对于内容，这并不是一个真正的选项(SEO)。