20200225 - ESLint

[onvno]

warning Dangerous property 'dangerouslySetInnerHTML' found 出现原因是提示可能会存在XSS攻击,dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你。

解决办法是直接使用React的createElement，进行层层包裹html字段，使用方法链接：

import React from 'react';
import ReactDOM from 'react-dom';

const list =
  React.createElement('div', {},
    React.createElement('h1', {}, 'My favorite ice cream flavors'),
    React.createElement('ul', {},
      [
        React.createElement('li', { className: 'brown' }, 'Chocolate'),
        React.createElement('li', { className: 'white' }, 'Vanilla'),
        React.createElement('li', { className: 'yellow' }, 'Banana')
      ]
    )
  );

ReactDOM.render(
  list,
  document.getEle

最终可以选用第三方包htmr解决,它帮着实现了嵌套以及样式渲染：

# 简单用法
import React from 'react';
import convert from 'htmr';

class Component extends React.Component {
  render() {
    return convert('<p>No more dangerouslySetInnerHTML</p>');
  }
}

# 复杂用法
import React from 'react';
import convert from 'htmr';
import styled from 'emotion/react';

const Paragraph = styled('p')`
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
`;

const transform = {
  p: Paragraph,
  // you can also pass string for native DOM node
  a: 'span',
};

class Component extends React.Component {
  render() {
    // will return <Paragraph><span>{'Custom component'}</span></Paragraph>
    return convert('<p><a>Custom component</a></p>', { transform });
  }
}

其他可能方案：

• Safe alternative to dangerouslySetInnerHTML，使用DOMPurify这个包，没有深入看
• How to prevent XSS attacks when using dangerouslySetInnerHTML in React