React源码学习 - react框架如何防御xss

[z2014]

react的第一道防线是文本转义

let message = {
    text: '<img src onerror="alert(/xss/)" />'
}
// 自动转义
<p>
  {message.text}
</p>

最后结果是会被自动转义了

但是如果我们使用

<p dangerouslySetInnerHTML={{ __html: message.text }} />

这种方式来渲染节点，那么我们就会被攻击了

我们正常渲染的porps也有可能遭到攻击，可以参考下面这个链接 react bug report

react 0.13版本判断是否是一个react元素是通过

_isReactElement: true,

那么攻击者很容易将用户内容构造成一个react组件，然后构造xss攻击

那么在react 0.14版本以后，判断方法就变成了

/**
 * Verifies the object is a ReactElement.
 * See https://reactjs.org/docs/react-api.html#isvalidelement
 * @param {?object} object
 * @return {boolean} True if `object` is a ReactElement.
 * @final
 */
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}
export const REACT_ELEMENT_TYPE = hasSymbol
  ? Symbol.for('react.element')
  : 0xeac7;