Question

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

出于显而易见的原因，我不想使用危险的版本。是否有一个解析器，如marked但对于html，以便它删除脚本标记和其他无效的HTML。

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>` }
/>

Answer 2

基于接受的答案的示例：

import sanitizeHtml from 'sanitize-html';

const MyComponent = () => {
  dirty = '<a href="my-slug" target="_blank" onClick="evil()">click</a>';
  const clean = sanitizeHtml(dirty, {
    allowedTags: ['b', 'i', 'em', 'strong', 'a'],
    allowedAttributes: {
      a: ['href', 'target']
    }
  });
  return (
    <div 
      dangerouslySetInnerHTML={{__html: clean}}
    />
  );
};

MyComponent呈现包含不带div的链接的onClick="evil()"：

<a href="my-slug" target="_blank">click</a>

Answer 3

对于XSS过滤，安全人员编写的sanitize-html有一个很好的替代方法，称为dompurify。

使用https://stackoverflow.com/a/38663813/1762849的包装使用DOMPurify的外观如下：

const defaultOptions = {
  ALLOWED_TAGS: [ 'b', 'i', 'em', 'strong', 'a' ], 
  ALLOWED_ATTR: ['href']
};

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

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

用法：

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

此外，如果您需要在客户端和服务器上清理HTML，请考虑使用isomophic-dompurify模块，该模块统一在前端和后端使用DOMPurify。

如何安全地渲染html in react？

3 个答案: