由lodash漏洞引发的对深拷贝的学习

可能有信息敏感的同学已经了解到：Lodash 库爆出严重安全漏洞，波及 400万+ 项目。这个漏洞使得 lodash “连夜”发版以解决潜在问题，并强烈建议开发者升级版本。
我们在忙着“看热闹”或者“”升级版本”的同时，静下心来想：真的有理解这个漏洞产生的原因，明白漏洞修复背后的原理了吗？

漏洞原因

例举defautlsDeep

_.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } })

// 输出 { 'a': { 'b': 2, 'c': 3 } }

如上例，该方法：

分配来源对象（该方法的第二个参数）的可枚举属性到目标对象（该方法的第一个参数）所有解析为 undefined 的属性上

const payload = '{"constructor": {"prototype": {"toString": true}}}'
_.defaultsDeep({}, JSON.parse(payload))

如此一来，就触发了原型污染。

什么是原型污染?

image.png

每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，toString() 返回 [object type]，其中 type 是对象的类型。

如果 Object 原型上的 toString 被污染，后果可想而知。以此为例，可见 lodash 这次漏洞算是比较严重了。

深拷贝和浅拷贝

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

为什么要使用深拷贝？

我们希望在改变新的数组（对象）的时候，不改变原数组（对象）

Js自带的深拷贝方法

1.Array
slice()、concat、Array.from()、...操作符：只能实现一维数组的深拷贝。
2.Object
Object.assign()：只能实现一维对象的深拷贝。
JSON.parse(JSON.stringify(obj))：可实现多维对象的深拷贝，但会忽略undefined、任意的函数、symbol 值。

深拷贝函数的实现

// 简单深拷贝函数(递归)
const simpleDeepClone = (obj: any) => {
    let result: any = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj === "object") {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] === "object") {
            result[key] = simpleDeepClone(obj[key]);
          } else {
            result[key] = obj[key];
          }
        }
      }
    }
    return result;
  }

但这个方法遇到循环引用，会陷入一个死循环。如：

var obj1 = {
    x: 1, 
    y: 2
};
obj1.z = obj1;
var obj2 = deepClone(obj1);

需要判断对象的字段是否引用此对象，或对象父级：

const deepClone = (obj: any, parent: any = null) => {
    let result: any = Array.isArray(obj) ? [] : {};
    // 防止循环引用
    let _parent = parent;
    while (_parent) {
      if (_parent.originalParent === obj) {
        return _parent.currentParent;
      }
      _parent = _parent.parent;
    }

    if (obj && typeof obj === "object") {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] && typeof obj[key] === "object") {
            result[key] = deepClone(obj[key], {
              originalParent: obj,
              currentParent: result,
              parent: parent
            });
          } else {
            result[key] = obj[key];
          }
        }
      }
    }
    return result;
  }

最后加入不同类型的值拷贝：

const deepClone = (obj: any, parent: any = null) => {
    let result: any = Array.isArray(obj) ? [] : {};
    // 防止循环引用
    let _parent = parent;
    while (_parent) {
      if (_parent.originalParent === obj) {
        return _parent.currentParent;
      }
      _parent = _parent.parent;
    }

    if (obj && typeof obj === "object") { // 返回引用数据类型(null已被判断条件排除))
      if (obj instanceof RegExp) { // RegExp类型
        result = new RegExp(obj.source, obj.flags)
      } else if (obj instanceof Date) { // Date类型
        result = new Date(obj.getTime());
      } else {
        if (obj instanceof Array) { // Array类型
          result = []
        } else {
          result = {}
        }
        for (let key in obj) { // Array类型 与 Object类型 的深拷贝
          if (obj.hasOwnProperty(key)) {
            if (obj[key] && typeof obj[key] === "object") {
              result[key] = deepClone(obj[key], {
                originalParent: obj,
                currentParent: result,
                parent: parent
              });
            } else {
              result[key] = obj[key];
            }
          }
        }
      }
    } else { // 返回基本数据类型与Function类型,因为Function不需要深拷贝
      return obj
    }
    return result;
  }

上面实现了一个深拷贝的函数，但是我们可以看出进行深拷贝需要消耗大量的性能。

immer.js

以下为简单用例：

   let obj: any = {a: {x:"crj",y:"rj"}, b: {c: 2, d: 5}}
    let newObj: any = produce(obj, (draftState: any) => {
      draftState.b = {c: 5}
    })
    console.log(newObj)
    console.log(obj)
    console.log(newObj.a === obj.a)

结果：

image.png

从例子中可以看出immer的produce方法，在对obj进行深拷贝的时候，深层次的对象在没有修改的情况下仍然能够保证严格相等。这里的严格相等就可以认为是没有新建这个对象，仍然在内部保持着之前的引用。
而在项目使用中，我发现个现象。当通过produce生成的对象,其内部属性被设为不可修改。
在上述代码中执行newObj.a = 3报错如下：

image.png

为什么会这样呢？找到了一片关于immer原理的文章:immer.js 简介及源码解析