为什么React元素有一个$$typeof属性?

因为json不支持symbol类型，所以用户即使提交了message的信息，到最后服务器端也不会保存
t y p e o f 的属性，而在渲染的时候， r e a c t 会检测是否有 typeof的属性，而在渲染的时候，react会检测是否有
typeof的属性，而在渲染的时候，react会检测是否有
typeof属性，如果没有这个属性则会拒绝处理该元素

你觉得你在写 JSX：

<marquee bgcolor="#ffa7c4">hi</marquee>

其实，你在调用一个方法：

React.createElement(
  /* type */ 'marquee',
  /* props */ { bgcolor: '#ffa7c4' },
  /* children */ 'hi'
)

之后方法会返回一个对象给你，我们称此对象为React的元素（element），它告诉 React 下一个要渲染什么。你的组件（component）返回一个它们组成的树（tree）。

{
  type: 'marquee',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'),}

这个 $$typeof 是什么？

各种前端框架出现之前，应用通常会构造 HTML 并将它们插入到 DOM 中，例如：

const messageEl = document.getElementById('message');
messageEl.innerHTML = '<p>' + message.text + '</p>';

这代码一般能正常工作，除非你的 message.text 返回 ‘’ 这样的字符串。

为了防止这种情况，可以使用类似于 document.createTextNode()或textContent 仅处理 text 的 api。也可以通过预处理替换 < > 这类特殊的字符。但是这样还是有很多潜在的问题。所以现代前端框架像 React 会为字符串转义成文字内容：

<p>
  {message.text}
</p>

就算 message.text 返回 也会当成字符串处理。要在 React 元素中呈现 HTML ，则需要编写dangerouslySetInnerHTML={{ __html: message.text }}，这有助于你在审查代码的时候重视它。

但是这样仍然无法完全禁止注入攻击，例如：，注意 website 为 'javascript: stealYourPassword()'的情况。 对用户输入使用 … 运算符也很危险 <div {…userData}>。

为什么需要 $$typeof

通过上面的介绍你可能已经猜到了，$$typeof 是为了防止 XSS 攻击。

前面介绍了，React 元素大概是这样的（没有包含 $$typeof 这个属性的情况）：

{
  type: 'marquee',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null
}

试想这样一种情况，服务器允许用户储存任意的 JSON 数据。那么就可以手动构建 React Element 对象传入到元素中。例如：

// Server could have a hole that lets user store JSON
let expectedTextButGotJSON = {
  type: 'div',
  props: {
    dangerouslySetInnerHTML: {
      __html: '/* put your exploit here */'
    },
  },
  // ...
};
let message = { text: expectedTextButGotJSON };

// Dangerous in React 0.13
<p>
  {message.text}
</p>

所以 React 0.14 使用 Symbol 标记每个 React 元素。

{
  type: 'marquee',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'),
}

这样就可以规避这个问题，使用 Symbol 类型是因为 JSON 中无法传递 Symbol。React 会检查 element.$$typeof 然后拒绝处理非法的元素。