Why-Do-React-Elements-Have-a-$$typeof-Property

你可能认为你在写JSX:

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

但是实际上是你在调用一个函数:

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

这个函数给你返回了一个对象，我们把这个对象叫做React元素。它告诉React接下来渲染什么，组件就是返回对象🌲。

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

像上面这样，如果你使用React你可能熟悉type, props, key, ref这些字段。但是$$typeof是什么？为什么会有个Symbol作为值？

这个也是你在写react的时候不需要知道的一件事，但是如果你知道了，那感觉会很棒。在这篇文章中还有一些你可能想知道的安全性的提示。也许有一天你会编写自己的UI库，所有这些都会派上用场。我希望是这样的。

在客户端UI库变得普遍并添加一些基本保护之前，应用程序代码通常构造HTML并将其插入DOM：

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

这就可以了，除非当message.text是像'<img src onerror="stealYourPassword()">'这样的时候。 你不希望陌生人编写的内容显示在应用程序呈现的HTML中。

为了防止此类攻击，你可以使用安全的API，例如document.createTextNode或textContent，它只处理文本。你还可以通过在用户提供的文本中替换<，>等其他潜在危险字符来抢先“转义”输入。

尽管如此，错误的成本很高，每次将用户编写的字符串插入输出时，记住它都很麻烦。这就是为什么像React这样的现代库在默认的情况下为字符串转义文本内容的原因：

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

如果message.text是带有<img>或其他的标签，则它不会变成真正的<img>标签(tag)。React将转义内容，然后将其插入DOM。所以你应该看标记而不是看img标签。

要在React元素中呈现任意HTML，你必须写dangerouslySetInnerHTML = {{__ html：message.text}}。然而事实上，这么笨拙的写法是一个功能。 它意味着高度可见，便于在代码审查和代码库审计中捕获它。

这是否意味着React对于注入攻击是完全安全的？不是。 HTML和DOM提供了大量的攻击面，对于React或其他UI库来说，要缓解这些攻击面要么太难要么太慢。大多数剩余的攻击都偏向于属性上进行。例如，如果渲染<a href={user.website}>，请注意其user.website可能是“javascript：stealYourPassword()”。像<div {... userData}>那样扩展用户的输入很少见，但也很危险。

仍然，转义文本内容是合理的第一道防线，可以捕获大量潜在的攻击。知道像这样的代码是安全的，这不是很好吗？

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

好吧，这也不总是正确的。 这时候就需要派$$typeof上场了。

React的elements在设计的时候就决定是一个对象。

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

但是，如果你的服务器有一个漏洞，允许用户存储任意JSON对象， 而客户端代码需要一个字符串，这可能会成为一个问题：

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

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

这是有效的，因为你不能只把Symbol放在JSON中。因此，即使服务器具有安全漏洞并返回JSON而不是文本，该JSON也不能包含Symbol.for('react.element')。React将检查element.$$ typeof，如果元素丢失或无效，将拒绝处理该元素。

并且使用Symbol.for的好处是符号在iframe和worker等环境之间是全局的。因此，即使在更奇特的条件下，此修复也不会阻止在应用程序的不同部分之间传递可信元素。同样，即使页面上有多个React副本，它们仍然可以继续工作。

为什么是个具体的号码？ 0xeac7看起来有点像“React”。

阅读之后的尝试

下面就是个人对于$$typeof的测试。

class Example extends React.Component {
  state = {
    show: null
  }

  componentDidMount() {
    const show = JSON.parse(JSON.stringify(<button className='custom'>'click me'</button>))
    show.$$typeof = Symbol.for('react.element') // 你试试没有这行的效果
    this.setState({show})
  }

  render(){
    return this.state.show
  }
}

export default Example

这是为什么？因为上面的代码在JSON.stringify处理之后，symbol值会被忽略，所以需要手动加上。你可以试试加与不加的区别。

其实这个$$typeof主要就是像上文阐述的，为了防止后端的bug。比如数据库user表下面有个name字段，正常的react展示会像下面这样:

render() {
  const {user} = this.state 
  return <span>{user.name}</span>
}

render() {
  const {user} = this.state 
  return(
    React.createElement('span', null, user.name)
  )
}

如果这个name是一个json，我们知道createElement的第三个参数是一个children，他可以是组件，那么这个对象就会被当做是组件，所以加上了这个。

让我们来试试吧:

class Example extends React.Component {
  state = {
    show: null
  }

  componentDidMount() {
    let obj = {type: 'button', ref: null, key: null, props: {children: 'i am children'}} //用户恶意模拟一个element
    obj.$$typeof = Symbol.for('react.element') // 如果没有这个去验证，就直接被当做一个children去处理了
    const show = <button className='custom'>{obj}</button>
    this.setState({show})
  }

  render(){
    return this.state.show
  }
}

export default Example

PreviousHow-Does-setState-Know-What-to-Do NextWhy-Do-React-Hooks-Rely-on-Call-Order

Last updated 6 years ago