介绍
在某些情况下，您可能希望在 React 组件中显示 HTML。HTML 可能来自外部源或您想要向用户显示的文件。
默认情况下，React 不允许您在组件中注入 HTML，原因包括跨站点脚本。但是，在某些情况下，例如 CMS 或所见即所得编辑器，您必须处理原始 HTML。在本指南中，您将了解如何在组件中嵌入原始 HTML。
dangerouslySetInnerHTML 属性
如果您尝试直接在组件内部呈现 HTML 字符串，React 将自动清理它并将其呈现为纯字符串。
const myHTML = `<h1>John Doe</h1>`;
const App = () => <div>{myHTML}</div>;
上述代码不会在标题中呈现字符串“John Doe”。相反，借助 React，完整的字符串（包括 H1 标签）将显示给用户。
要将字符串呈现为 HTML，您需要使用dangerouslySetInnerHTML属性。
const myHTML = `<h1>John Doe</h1>`;
const App = () => <div dangerouslySetInnerHTML={{ __html: myHTML }} />;
dangerouslySetInnerHTML属性用于呈现和注入 DOM 格式的内容到前端。使用此属性被视为一种不良做法，尤其是在处理用户输入时。您应该将任何用户输入视为不安全的，并在将其注入前端之前对其进行清理。
dangerouslySetInnerHTML属性必须是一个具有键__html和 HTML 字符串值的对象。误用dangerouslySetInnerHTML属性可能会使您的应用遭受跨站点脚本攻击。因此，在使用此属性之前，您需要确保 HTML 字符串经过正确清理并且来自可靠来源。您应避免将任何用户接受的输入传递到dangerouslySetInnerHTML属性中。
跨站点脚本 (XSS)
跨站点脚本 (XSS) 攻击允许恶意用户或黑客将不安全的 HTML 代码注入其他最终用户的网站。这允许黑客访问 cookie、本地存储等个人数据。
dangerouslySetInnerHTML 的更安全替代方案
如果 XSS 是主要关注点，则可以使用外部库（如DOMPurify）来清理 HTML 字符串，然后使用dangerouslySetInnerHTML prop将其注入 DOM 。
要安装 DOMPurify 库，请运行以下命令。
npm i dompurify
您可以在下面看到示例用法。
import DOMPurify from "dompurify";
const myHTML = `<h1>John Doe</h1>`;
const mySafeHTML = DOMPurify.sanitize(myHTML);
const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;
您还可以配置DOMPurify以仅允许特定的标签和属性。
// ...
const mySafeHTML = DOMPurify.sanitize(myHTML, {
ALLOWED_TAGS: ["h1", "p", "span"],
ALLOWED_ATTR: ["style"],
});
// ...
结论
处理来自用户的 HTML 内容时，安全性是首要考虑的问题。您不能信任任何来自用户的输入，即使是维护或编写应用内容的管理员用户也不行。因此，在将 HTML 内容注入 DOM 之前，您应始终使用DOMPurify或任何其他库对其进行清理。请记住，在客户端清理大型 HTML 字符串可能会降低应用性能；幸运的是，DOMPurify也可以在 NodeJS 服务器上使用，因此您应该考虑在后端清理内容。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
