如何在反应中安全地呈现html？

Question

我从文本区域获得了一些用户生成的 html 标记，我想在屏幕的另一部分呈现它。标记作为字符串保存在组件的 props 中。

出于明显的原因，我不想使用危险的sethtml。是否有诸如 标记 但用于 html 的解析器，以便它去除脚本标签和其他无效的 html。

原文由 silverlight513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 sanitize-html 模块清理 html，并使用 dangerouslySetInnerHTML 呈现清理过的字符串。

您可以创建一个简单的包装器组件：

 const defaultOptions = {
  allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
  allowedAttributes: {
    'a': [ 'href' ]
  },
  allowedIframeHostnames: ['www.youtube.com']
};

const sanitize = (dirty, options) => ({
  __html: sanitizeHtml(
    dirty,
    options: { ...defaultOptions, ...options }
  )
});

const SanitizeHTML = ({ html, options }) => (
  <div dangerouslySetInnerHTML={sanitize(html, options)} />
);

用法：

 <SanitizeHTML html="<img src=x onerror=alert('img') />" />

---

您还可以使用 react-sanitized-html 的 SanitizedHTML 组件，它是 sanitize-html 的反应包装器：

 <SanitizedHTML
  allowedAttributes={{ 'a': ['href'] }}
  allowedTags={['a']}
  html={ `<a href="http://bing.com/">Bing</a>` }
/>

原文由 Ori Drori 发布，翻译遵循 CC BY-SA 4.0 许可协议