JSON.parse() 对于 __proto__ 的处理
一、遇到的问题
本来是研究 JS 的原型污染，后来发现有个小细节别人都没讲，JSON.parse() 和 对象字面量对于 __proto__ 的处理是不同的，特此记录分析的过程;
使用 lodash 4.17.10 之前的版本
- 对象字面量不会触发原型污染：
function Person(name) {
this.name = name;
}
let lee = new Person('lee');
let o1 = {"a": 1, "__proto__": {"b": 2}};
_.defaultsDeep(lee,o1);
let tom = new Person('tom');
console.log(tom.b);
- JSON.parse()会触发原型污染
function Person(name) {
this.name = name;
}
let lee = new Person('lee');
let o1 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}');
_.defaultsDeep(lee,o1);
let tom = new Person('tom');
console.log(tom.b);
二、代码说明：
2.1 JSON.parse() 测试
let o1 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}');
const hasKey = o1.hasOwnProperty('__proto__');
const val = o1.__proto__;
const isEqual = Object.getPrototypeOf(o1,'__proto__') === o1.__proto__;
console.log(`1. o1 有自身的属性 __proto__ 吗？${hasKey }`);
console.log(`2. 打印 o1 的自身属性 __proto__: `);
console.log(val);
console.log(`3. 比较 o1 的原型对象和自身的属性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的键值：${keyArr.join(',')}`);
JSON.parse() 测试结果
2.2 对象字面量测试
let o1 = {"a": 1, "__proto__": {"b": 2}};
const hasKey = o1.hasOwnProperty('__proto__');
const val = o1.__proto__;
const isEqual = Object.getPrototypeOf(o1,'__proto__') === o1.__proto__;
console.log(`1. o1 有自身的属性 __proto__ 吗？${hasKey }`);
console.log(`2. 打印 o1 的自身属性 __proto__: `);
console.log(val);
console.log(`3. 比较 o1 的原型对象和自身的属性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的键值：${keyArr.join(',')}`);
对象字面量测试结果
通过上述两个测试，可以发现一些不同之处：
- JSON.parse() 将
__proto__变成了对象的自身属性，而且并未改动对象的原型对象。 - 对象字面量并没有
__proto__这个自身属性，__proto__指代的就是对象的原型对象。
我们知道 for...in 只能够遍历到对象的可枚举的属性(包括对象自身的属性，原型链上的属性)，所以通过对象字面量创建的对象中，无法遍历到 __proto__。
三、V8 ignores keys named proto in JSON.parse
具体的讨论可移步至 proto-and-json
个人觉得 V8 ignores keys named proto in JSON.parse 的说明是不完整的，这句话的翻译是：v8 忽略了在 JSON.parse() 参数中特殊的键名 __proto__，没有将 __proto__ 的值直接替换对象本来的原型对象,而是又定义了一个对象的自有属性 __proto__。(注意对象此时有 2 个__proto__属性，一个是枚举的，对象自身的属性；另一个是不可枚举的，指向原型对象)。
四、JSON.parse() 是如何实现在对象上新增一个键名为 __proto__ 的自身属性的？
翻看 JSON.parse() 的源码可以发现:
j = eval("(" + text + ")");
内部是通过 eval 执行经过校验以及正则替换后的字符串。到此本来没法进行下一步分析了，因为也不知道 eval 内部的执行机制。
又发现一篇文章 proto in ECMAScript 6
image.png
里面提到两个概念：define 和 assign。
4.1 defineProperty
下面的例子，可以发现和json.parse() 是相同的，在对象上新定义了一个自有属性__proto__ ，而不是直接更改指向原型对象的那个__proto__。
let o1 = {};
Object.defineProperty(o1, '__proto__',{ value: {b: 123}, enumerable: true });
const hasKey = o1.hasOwnProperty('__proto__');
const val = o1.__proto__;
const isEqual = Object.getPrototypeOf(o1,'__proto__') === o1.__proto__;
console.log(`1. o1 有自身的属性 __proto__ 吗？${hasKey }`);
console.log(`2. 打印 o1 的自身属性 __proto__: `);
console.log(val);
console.log(`3. 比较 o1 的原型对象和自身的属性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的键值：${keyArr.join(',')}`);
defineProperty
4.2 assign
其实 assign 对应的行为就是对象字面量。
对象本身就有一个__proto__属性(注意不是自身的属性)，指向对象的原型对象，即使字面量里面有一个键名为 __proto__ 的属性，js 的内部运行机制也是把键名为 __proto__ 的属性的值 assign 到原型对象中，直接替换了原有的值，并不会真正的为对象再创建一个自身的属性 __proto__。
推荐阅读
proto in ECMAScript 6
深入理解 JavaScript Prototype 污染攻击
fix: prototype pollution in _.defaultsDeep
