如何安全地在响应中呈现HTML？

Question

我从文本区域得到了一些用户生成的html标记，我想在屏幕的另一部分上呈现它。标记将以字符串形式保存在组件的属性中。

由于明显的原因，我不想使用危险地设置HTML。是否有诸如标记为HTML
的解析器，以便它剥离脚本标记和其他无效的html。

Answer 1

使用sanitize-html模块对html进行清理，并使用危险地 SetInnerHTML呈现经过清理的字符串。

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

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组件，该组件是react包装器sanitize-html：

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