欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React 中无用但可以装逼的知识

程序员文章站 2022-06-24 14:37:47
最近看了 "Dan Abramov" 的一些 "博客" ,学到了一些React的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助,不过这可以让你了解到更多React底层实现的内容以及为什么要怎样实现。可以让你跟别人有更多的谈资,当然,也可以在某些场合装一下逼。那么接下 ......

最近看了dan abramov的一些,学到了一些react的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助,不过这可以让你了解到更多react底层实现的内容以及为什么要怎样实现。可以让你跟别人有更多的谈资,当然,也可以在某些场合装一下逼。那么接下来直接进入正文。

react如何区分类组件和函数组件

我们可以考虑从几种方式:

统一使用new方法来生成实例

问题:

  • 对于函数组件而言,这样会让它们生成一个多余的this作为对象实例。

  • 对于箭头函数而言,会报错。因为箭头函数并没有this,它的this是取自于定义这个箭头函数所在环境的this

    const fun = () => console.log(2);
    new fun(); // uncaught typeerror: fun is not a constructor
  • 使用new会妨碍函数组件返回原始类型(string、number等)。

    我们都知道,使用new操作符后,只有当函数返回非null 和非undefined的对象的时候,返回值才会生效。否则new操作符的返回值都会是对象。关于new操作符详细的内容可以点击这里

    function greeting() {
      return 'hello';
    }
    
    // 并不会返回字符串
    new gretting(); // gretting {}

综上所述,这个方法不可行。

通过instanceof来判断

不知道你有没有察觉,我们写react的类组件的时候,我们都需要通过extends react.component的方式来写。那么,我们是否可以通过以下方式来判断呢?

class a extends react.component {
}

a.prototype instanceof react.component; // true

通过这种方式,我们确实可以区分类组件和函数组件,可是也存在一些问题:

  • 箭头函数没有prototyoe

    这个问题其实好解决,如下

    function gettype(component) {
      if (component.prototyoe && component.prototype instance react.component) {
        return 'class';
      }
    
      return 'function';
    }
  • 对于一些项目(虽然很少)可能存在着多个react副本,并且我们目前要检查的组件它继承的react.component是来自于另一个react副本的,这就会出现问题。这个问题的话就没办法解决了。因此这种方式也存在问题。

通过为react.component增加一个特别的标记

写过react的类组件的人都知道,我们每一个类组件都是要继承于react.component的。因此,如果我们在react.component增加一个标记isreactcomponent,这样通过继承的方式,我们就可以根据这个标记来判断是不是类组件了。

// react 内部
class component {}
component.prototype.isreactcomponent = {};

// 检查
class greeting extends component {};
console.log(greeting.prototype.isreactcomponent);

事实上,react目前就是通过这种方式来进行检查的。如果你没有extends react.component,react不会在原型上找到isreactcomponent,因此不会把组件当做类组件来处理。

react elements为什么要有一个$typeof属性

假如我们的jsx长这个样子:

<button type="primary">点击</button>

实际上,在经过babel后,它会变成下面这段代码:

react.createelement(
  /* type */ 'button',
  /* props */ { type: 'primary' },
  /* children */ '点击'
)

之后,这个函数执行结果会返回一个对象,这个对象我们称为react element。它是一个用来描述我们将要渲染的页面结构的一个不可变对象。想了解更多与react component,elementsinastances的可以。

// react element
{
  type: 'button',
  props: {
    type: 'primary',
    children: '点击',
  },
  key: null,
  ref: null,
  $$typeof: symbol.for('react.element'), // 为什么有这个东西
}

对于react开发者来说,上面这些属性大部分都是比较常见的。可是为什么混进了一个奇怪的$$typeof??它是干嘛的呢?它的值为什么是一个symbol呢?

这个属性的引入,其实要从一个安全漏洞说起。

假如我们要显示一个变量,如果你使用纯js来写的话,可能是这样:

const messageel = document.getelementbyid('message');
messageel.innerhtml = `<div>${message}</div>`;

这一段代码,对于熟悉或者了解过xss攻击的人来说,一看就知道会有问题,存在着xss攻击。如果message是用户可以控制的变量(比如说是用户输入的评论)的话,那么用户就可以进行攻击了。比如用户可以构造下面的代码来进行攻击:

message = '<img onerror="alert(2)" src="" />';

如果我们明确知道,我们只想单纯的渲染文本,不想把它当成html来渲染的话,那么我们可以通过textcontent来避免这个问题。

const messageel = document.getelementbyid('message');
messageel.textcontent = `<div>${message}</div>`;

而对于react而言的话,想要实现相同的效果,只需要:

<div>{message}</div>

即使message里面含有imgscript类似的标签,它们最终也不会以实际上的标签显示。react会对渲染的内容进行转译,比如说上面的攻击代码会被转译为:

message = '<img onerror="alert(2)" src=""/>';
// 转译为
message = '&lt;img onerror="alert(2)" src=""/&gt;'

因此,这样就可以避免大部分场景下的xss攻击了。

当然,react也提供了另一种方式来将用户输入的内容当成html来渲染:

<div dangerouslysetinnerhtml={{ __html: message }}></div>

前面说了这么多,那么跟$$typeof又有什么关系呢?别急,重点来了。

对于下面这种写法,我们一般都知道,message可以传基本类型、自定义组件和jsx片段。

<div>{message}</div>

可是,其实我们还可以直接传react element。比如,我们可以直接这样写

class app extends react.component {
  render() {
    const message = {
      type: "div",
      props: {
        dangerouslysetinnerhtml: {
          __html: `<h1>arbitrary html</h1>
            <img onerror="alert(2)" src="" />
            <a href='http://danlec.com'>link</a>`
        }
      },
      key: null,
      ref: null,
      $$typeof: symbol.for("react.element")
    };
    return <>{message}</>;
  }
}

这样在运行的时候,就会弹出一个alert框了。。那么,这样会有什么风险呢?

考虑一个场景,比如一个博客网站的评论信息message是由用户提供的,并且支持传入json。那么如果用户直接将上文的message发送给后台保存。之后,通过下面这种方式展示的话,用户就可以进行xss攻击了。

<div>{message}</div>

假设如果没有$$typeof属性的话,这种攻击确实可行。因为其他的属性都是可序列化的。

const message = {
  type: "div",
  props: {
    dangerouslysetinnerhtml: {
      __html: `<h1>arbitrary html</h1>
<img onerror="alert(2)" src="" />
<a href='http://danlec.com'>link</a>`
    }
  },
  key: null,
  ref: null,
};

json.stringify(message);

事实上,react 0.13当时就存在着这个漏洞。之后,react 0.14就修复了这个问题,修复方式就是通过引入$$typeof属性,并且用symbol来作为它的值。

// 引入 $$typeof
const message = {
  type: "div",
  props: {
    dangerouslysetinnerhtml: {
      __html: `<h1>arbitrary html</h1>
<img onerror="alert(2)" src="" />
<a href='http://danlec.com'>link</a>`
    }
  },
  key: null,
  ref: null,
  $$typeof: symbol.for("react.element")
};

json.stringify(message); // symbol无法被序列化

这是一个有效的方法,因为json是不支持symbol类型的。所以,即使用户提交了如上的message信息,到最后服务端也不会保存$$typeof属性。而在渲染的时候,react 会检测是否有$$typeof属性。如果没有这个属性,则拒绝处理该元素。

那么如果浏览器不支持symbol怎么办?

是的,那这种保护方案就没用了。react 依然会加上$$typeof字段,并且将其值设置为0xeac7。(为什么是这个数字呢,因为这个数字看起来有点像react)。

想查看具体的攻击流程,可以查看。

总结

  • react会给react.component.prototype增加一个isreactelement标志。这样,react就可以在渲染的时候判断当前渲染的组件是类组件还是函数组件。
  • react element是一个用于描述要渲染的页面结构的一个不可变对象。react函数组件和类组件执行到最后,其实都是生成一个react elements树。之后再由实际的渲染层(react-dom、react-native)根据这个react elements树渲染为实际的页面。
  • <div>{message}</div>这种方式不仅可以传原型类型、jsx和组件,还可以直接传react element对象。
  • $$typeof的出现就是为了防止服务端允许储存json而引起的xss攻击。可是对于不支持symbol的浏览器,这个问题依然存在。

本文地址在->, 欢迎给个 start 或 follow。

参考资料

why do react elements have a $$typeof property?

how does react tell a class from a function?

xss via a spoofed react element