如何在 React 中使用静态 HTML

2020-07-03 08:00:00 · 飞浪

介绍在某些情况下，您可能希望在React组件中显示HTML。HTML可能来自外部源或您想要向用户显示的文件。默认情况下，React不允许您在组件中注入HTML，原因包括跨站点脚本。但

介绍

在某些情况下，您可能希望在 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 服务器上使用，因此您应该考虑在后端清理内容。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 中使用静态 HTML

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import DOMPurify from "dompurify"; const myHTML = `<h1>John Doe</h1>`; const mySafeHTML = DOMPurify.sanitize(myHTML); const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;