qiankun 內(nèi)為微應(yīng)用實(shí)現(xiàn)了沙箱機(jī)制妻导， 以實(shí)現(xiàn)js隔離的目的， 沙箱的重點(diǎn)在于初始化時(shí)對(duì)全局對(duì)象的copy 及代理
使用
const sand = new ProxySand(name)
sand.active() // 啟動(dòng)
sand.inacitve() // 關(guān)閉
屬性
- name 沙箱名
- type 沙箱類型
- Proxy proxy沙箱
- Snapshot
- LegacyProxy 舊沙箱實(shí)現(xiàn)
- sandboxRunning 沙箱是否運(yùn)行中
- proxy 全局對(duì)象的proxy副本, 沙箱實(shí)體
- active 啟動(dòng)沙箱
- inactive 關(guān)閉沙箱
實(shí)現(xiàn)
沙箱的實(shí)現(xiàn)過(guò)程都在 constructor 實(shí)例的創(chuàng)建中
設(shè)置初始值
this.name = name;
this.type = SandBoxType.Proxy;
const { updatedValueSet } = this;
const self = this;
const rawWindow = window;
復(fù)制window
const { fakeWindow, propertiesWithGetter } = createFakeWindow(rawWindow);
createFakeWindow
- getOwnPropertyDescriptor 返回對(duì)象指定的屬性配置
- defineProperty 給對(duì)象添加一個(gè)屬性并指定該屬性的配置
- hasOwnProperty 返回一個(gè)布爾值 乾翔，表示某個(gè)對(duì)象是否含有指定的屬性浊仆，而且此屬性非原型鏈繼承的
- freeze 凍結(jié)對(duì)象：其他代碼不能刪除或更改任何屬性
const rawObjectDefineProperty = Object.defineProperty;
function createFakeWindow(global: Window) {
const propertiesWithGetter = new Map<PropertyKey, boolean>();
const fakeWindow = {} as FakeWindow;
Object.getOwnPropertyNames(global) // 獲取全局對(duì)象屬性
.filter(p => { // 篩選不可修改屬性
const descriptor = Object.getOwnPropertyDescriptor(global, p);
return !descriptor?.configurable;
})
.forEach(p => {
// 獲取屬性配置
const descriptor = Object.getOwnPropertyDescriptor(global, p);
if (descriptor) {
// 是否有g(shù)et屬性
const hasGetter = Object.prototype.hasOwnProperty.call(descriptor, 'get');
// 修改部分特殊屬性為可修改
if (
p === 'top' ||
p === 'parent' ||
p === 'self' ||
p === 'window' ||
(process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
) {
// 屬性可delete
descriptor.configurable = true;
if (!hasGetter) {
// 屬性可修改
descriptor.writable = true;
}
}
// 記錄可訪問(wèn)屬性
if (hasGetter) propertiesWithGetter.set(p, true);
// 將屬性綁定到新對(duì)象上，并凍結(jié)
rawObjectDefineProperty(fakeWindow, p, Object.freeze(descriptor));
}
});
return {
fakeWindow,
propertiesWithGetter,
};
}
這里只將可修改屬性綁定到fakeWindow上, 對(duì)于不可修改屬性將直接使用window屬性
創(chuàng)建window代理
// 目標(biāo)標(biāo)識(shí)映射
const descriptorTargetMap = new Map<PropertyKey, SymbolTarget>();
// fakeWindow 只綁定了部分window上的不可修改屬性
const hasOwnProperty = (key: PropertyKey) => fakeWindow.hasOwnProperty(key) || rawWindow.hasOwnProperty(key);
const proxy = new Proxy(fakeWindow, {
// 設(shè)置值
set(target: FakeWindow, p: PropertyKey, value: any): boolean {
// 沙箱是否運(yùn)行中
if (self.sandboxRunning) {
target[p] = value;
// set 緩存數(shù)據(jù)
updatedValueSet.add(p);
// 如果屬性為 System, __cjsWrapper 模塊加載器，將屬性綁定到window上
interceptSystemJsProps(p, value);
return true;
}
if (process.env.NODE_ENV === 'development') {
console.warn(`[qiankun] Set window.${p.toString()} while sandbox destroyed or inactive in ${name}!`);
}
// 在 strict-mode 下呜叫，Proxy 的 handler.set 返回 false 會(huì)拋出 TypeError帐要，在沙箱卸載的情況下應(yīng)該忽略錯(cuò)誤
return true;
},
// 獲取值
get(target: FakeWindow, p: PropertyKey): any {
if (p === Symbol.unscopables) return unscopables;
// widow, self 返回全局代理
if (p === 'window' || p === 'self') {
return proxy;
}
if (
p === 'top' ||
p === 'parent' ||
(process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
) {
// if your master app in an iframe context, allow these props escape the sandbox
// iframe 嵌套
if (rawWindow === rawWindow.parent) {
return proxy;
}
return (rawWindow as any)[p];
}
// 返回包裝后的 hasOwnProperty
if (p === 'hasOwnProperty') {
return hasOwnProperty;
}
// 當(dāng)訪問(wèn)作為文檔時(shí)，標(biāo)記要文檔的符號(hào)落塑。createElement可以知道是由哪個(gè)沙箱調(diào)用的動(dòng)態(tài)追加補(bǔ)丁程序
if (p === 'document') {
// 為document掛載代理對(duì)象
document[attachDocProxySymbol] = proxy;
// 將刪除函數(shù)放入微隊(duì)列中
nextTick(() => delete document[attachDocProxySymbol]);
return document;
}
// 判斷屬性
const value = propertiesWithGetter.has(p) ? (rawWindow as any)[p] : (target as any)[p] || (rawWindow as any)[p];
return getTargetValue(rawWindow, value);
},
has(target: FakeWindow, p: string | number | symbol): boolean {
return p in unscopables || p in target || p in rawWindow;
},
// 獲取屬性描述
getOwnPropertyDescriptor(target: FakeWindow, p: string | number | symbol): PropertyDescriptor | undefined {
if (target.hasOwnProperty(p)) {
const descriptor = Object.getOwnPropertyDescriptor(target, p);
// 緩存屬性配置, 設(shè)置屬性配置時(shí)使用
descriptorTargetMap.set(p, 'target');
return descriptor;
}
if (rawWindow.hasOwnProperty(p)) {
const descriptor = Object.getOwnPropertyDescriptor(rawWindow, p);
// 緩存屬性配置, 設(shè)置屬性配置時(shí)使用
descriptorTargetMap.set(p, 'rawWindow');
return descriptor;
}
return undefined;
},
// 返回屬性列表
ownKeys(target: FakeWindow): PropertyKey[] {
return uniq(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
},
// 設(shè)置屬性配置
defineProperty(target: Window, p: PropertyKey, attributes: PropertyDescriptor): boolean {
const from = descriptorTargetMap.get(p);
switch (from) {
case 'rawWindow':
return Reflect.defineProperty(rawWindow, p, attributes);
default:
return Reflect.defineProperty(target, p, attributes);
}
},
// 屬性刪除
deleteProperty(target: FakeWindow, p: string | number | symbol): boolean {
if (target.hasOwnProperty(p)) {
// @ts-ignore
delete target[p];
updatedValueSet.delete(p);
return true;
}
return true;
},
});
