一做葵、遇到的問(wèn)題
本來(lái)是研究 JS 的原型污染，后來(lái)發(fā)現(xiàn)有個(gè)小細(xì)節(jié)別人都沒(méi)講傻铣，JSON.parse() 和 對(duì)象字面量對(duì)于 __proto__ 的處理是不同的廉侧，特此記錄分析的過(guò)程;
使用 lodash 4.17.10 之前的版本
- 對(duì)象字面量不會(huì)觸發(fā)原型污染：
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()會(huì)觸發(fā)原型污染
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);
二、代碼說(shuō)明：
2.1 JSON.parse() 測(cè)試
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 的原型對(duì)象和自身的屬性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的鍵值：${keyArr.join(',')}`);
2.2 對(duì)象字面量測(cè)試
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 的原型對(duì)象和自身的屬性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的鍵值：${keyArr.join(',')}`);
通過(guò)上述兩個(gè)測(cè)試，可以發(fā)現(xiàn)一些不同之處：
- JSON.parse() 將
__proto__變成了對(duì)象的自身屬性排抬，而且并未改動(dòng)對(duì)象的原型對(duì)象懂从。 - 對(duì)象字面量并沒(méi)有
__proto__這個(gè)自身屬性，__proto__指代的就是對(duì)象的原型對(duì)象蹲蒲。
我們知道 for...in 只能夠遍歷到對(duì)象的可枚舉的屬性(包括對(duì)象自身的屬性番甩，原型鏈上的屬性)，所以通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象中届搁，無(wú)法遍歷到 __proto__缘薛。
三、V8 ignores keys named proto in JSON.parse
具體的討論可移步至 proto-and-json
個(gè)人覺(jué)得 V8 ignores keys named proto in JSON.parse 的說(shuō)明是不完整的卡睦，這句話的翻譯是：v8 忽略了在 JSON.parse() 參數(shù)中特殊的鍵名 __proto__宴胧，沒(méi)有將 __proto__ 的值直接替換對(duì)象本來(lái)的原型對(duì)象,而是又定義了一個(gè)對(duì)象的自有屬性 __proto__。(注意對(duì)象此時(shí)有 2 個(gè)__proto__屬性么翰，一個(gè)是枚舉的牺汤，對(duì)象自身的屬性；另一個(gè)是不可枚舉的浩嫌，指向原型對(duì)象)檐迟。
四、JSON.parse() 是如何實(shí)現(xiàn)在對(duì)象上新增一個(gè)鍵名為 __proto__ 的自身屬性的码耐？
翻看 JSON.parse() 的源碼可以發(fā)現(xiàn):
j = eval("(" + text + ")");
內(nèi)部是通過(guò) eval 執(zhí)行經(jīng)過(guò)校驗(yàn)以及正則替換后的字符串追迟。到此本來(lái)沒(méi)法進(jìn)行下一步分析了，因?yàn)橐膊恢?eval 內(nèi)部的執(zhí)行機(jī)制骚腥。
又發(fā)現(xiàn)一篇文章 proto in ECMAScript 6
里面提到兩個(gè)概念：define 和 assign敦间。
4.1 defineProperty
下面的例子，可以發(fā)現(xiàn)和json.parse() 是相同的束铭，在對(duì)象上新定義了一個(gè)自有屬性__proto__ 廓块，而不是直接更改指向原型對(duì)象的那個(gè)__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 的原型對(duì)象和自身的屬性 __proto__: ${isEqual }`);
let keyArr = [];
for(let key in o1) {
keyArr.push(key);
}
console.log(`4. 打印 o1 的鍵值：${keyArr.join(',')}`);
4.2 assign
其實(shí) assign 對(duì)應(yīng)的行為就是對(duì)象字面量带猴。
對(duì)象本身就有一個(gè)__proto__屬性(注意不是自身的屬性)，指向?qū)ο蟮脑蛯?duì)象懈万，即使字面量里面有一個(gè)鍵名為 __proto__ 的屬性拴清，js 的內(nèi)部運(yùn)行機(jī)制也是把鍵名為 __proto__ 的屬性的值 assign 到原型對(duì)象中靶病，直接替換了原有的值，并不會(huì)真正的為對(duì)象再創(chuàng)建一個(gè)自身的屬性 __proto__口予。
推薦閱讀
proto in ECMAScript 6
深入理解 JavaScript Prototype 污染攻擊
fix: prototype pollution in _.defaultsDeep
