首页 > 其他分享 >关于qiankun沙箱sandbox

关于qiankun沙箱sandbox

时间:2024-03-22 10:25:41浏览次数:37  
标签:city window value prop qiankun sandbox 沙箱 proxyWindow 属性

为什么要有js资源隔离机制?

主应用和子应用,相同的全局变量,可能会发生冲突,子应用和子应用之间,相同的全局变量,也可能会发生冲突。在这里我们主要指的就是window。

思路:打开沙箱时能够修改属性值;关闭沙箱时恢复未开启沙箱前的属性值,并且要记录修改了哪些属性。

qiankun.js隔离机制

SnapshotSandBox

快照沙箱,支持单个微应用

  1. class SnapShotBox {
  2. windowSnap = {} //保存window上原本的属性值
  3. modifyPropMap = {} //记录修改的属性
  4. //微应用激活状态
  5. active() {
  6. //保存window对象上所有属性的状态
  7. for (const prop in window) {
  8. this.windowSnap[prop] = window[prop]
  9. }
  10. //恢复上一次在运行该微应用时所修改过的window上的属性
  11. Object.keys(this.modifyPropMap).forEach(prop => {
  12. window[prop] = this.modifyPropMap[prop];
  13. })
  14. }
  15. //微应用未激活状态
  16. inactive() {
  17. for (const prop in window) {
  18. //判断是否值发生了变化
  19. if (window[prop] !== this.windowSnap[prop]) {
  20. //记录修改了window上的哪些属性
  21. this.modifyPropMap[prop] = window[prop]
  22. //将window上的属性状态还原至微应用运行之前的状态
  23. window[prop] = this.windowSnap[prop]
  24. }
  25. }
  26. }
  27. }
  28. const snapShotBox = new SnapShotBox()
  29. window.city = 'Beijing'
  30. console.log(window.city); //Beijing
  31. snapShotBox.active()
  32. window.city = 'Shanghai'
  33. console.log(window.city); //Shanghai
  34. snapShotBox.inactive()
  35. console.log(window.city); //Beijing

完成了一个简易沙箱,但是会遍历window的所有属性,非常消耗性能,方案不是很可取,与此同时,影响了window上的值,如果多个微应用就可能会产生冲,只能激活一个微应用。

LegacySandBox
  1. class LegacySandBox {
  2. currentUpdatePropsValueMap = new Map() //微应用中修改的属性
  3. modifiedPropsOriginValueMapInSanBox=new Map()//window中被修改的属性
  4. addedPropsMapInSandBox=new Map() //添加的属性
  5. proxyWindow={}
  6. constructor(){
  7. const fakeWindow = Object.create(null)
  8. this.proxyWindow = new Proxy(fakeWindow,{
  9. set:(target,prop,value,receiver)=>{
  10. const originalVal = window[prop]
  11. if(!window.hasOwnProperty(prop)){ //如果window上没有这个属性,那么就是新增的属性
  12. this.addedPropsMapInSandBox.set(prop,value)
  13. //如果修改对象中没有这个属性,就保存一下
  14. }else if(!this.modifiedPropsOriginValueMapInSanBox.has(prop)){
  15. this.modifiedPropsOriginValueMapInSanBox.set(prop,originalVal)
  16. }
  17. this.currentUpdatePropsValueMap.set(prop,value)
  18. window[prop] = value
  19. },
  20. get:(target,prop,receiver)=>{
  21. return window[prop]
  22. },
  23. })
  24. }
  25. //设置window属性
  26. setWindowProp(prop, value, isToDelete) {
  27. if (value == "undfined" && isToDelete) {
  28. delete window[prop]
  29. } else {
  30. window[prop] = value
  31. }
  32. }
  33. //微应用激活状态
  34. active() {
  35. //恢复上一次在运行该微应用时所修改过的window上的属性
  36. this.currentUpdatePropsValueMap.forEach((value, prop) => {
  37. this.setWindowProp(prop, vaue);
  38. })
  39. }
  40. //微应用未激活状态
  41. inactive() {
  42. //还原window上原有的属性
  43. this.modifiedPropsOriginValueMapInSanBox.forEach((value,prop)=>{
  44. this.setWindowProp(prop,value)
  45. })
  46. //删除微应用运行期间,window上新增的属性
  47. this.addedPropsMapInSandBox.forEach((_,prop)=>{
  48. this.setWindowProp(prop,undefined,true)
  49. })
  50. }
  51. }
  52. let legacySandbox = new LegacySandBox()
  53. window.city = 'Beijing'
  54. console.log(window.city); //Beijing
  55. snapShotBox.active()
  56. window.city = 'Shanghai'
  57. console.log(window.city); //Shanghai
  58. snapShotBox.inactive()
  59. console.log(window.city); //Beijing

不需要遍历window上的所有属性,性能良好,但是依然改变的是window上的值,但同一时间还是只能激活一个微应用。

ProxySandBox
  1. class ProxySandBox {
  2. proxyWindow;
  3. isRunning = false
  4. //微应用激活状态
  5. active() {
  6. this.isRunning = true
  7. }
  8. //微应用未激活状态
  9. inactive() {
  10. this.isRunning = false
  11. }
  12. constructor() {
  13. const fakeWindow = Object.create(null)
  14. this.proxyWindow = new Proxy(fakeWindow, {
  15. set: (target, prop, value, receiver) => {
  16. if (this.isRunning) {
  17. target[prop] = value
  18. }
  19. },
  20. get: (target, prop, receiver) => {
  21. return prop in target ? target[prop] : window[prop]
  22. }
  23. })
  24. }
  25. }
  26. window.city = 'Beijing'
  27. let proxySandBox01 = new ProxySandBox()
  28. let proxySandBox02 = new ProxySandBox()
  29. proxySandBox01.active()
  30. proxySandBox02.active()
  31. proxySandBox01.proxyWindow.city = "Shanghai"
  32. proxySandBox02.proxyWindow.city = "Tianjing"
  33. console.log(window.city, proxySandBox01.proxyWindow.city, proxySandBox02.proxyWindow.city);
  34. //Beijing Shanghai Tianjing
  35. proxySandBox01.inactive()
  36. proxySandBox02.inactive()
  37. console.log(window.city, proxySandBox01.proxyWindow.city, proxySandBox02.proxyWindow.city);
  38. //Beijing Shanghai Tianjing

这种ProxySandBox不需要遍历window上的所有属性,性能良好,同一时间可以激活多个微应用互不干扰。

SnapshotSandBox兼容性很好ProxySandBox适用于es6的语法中,就简单介绍到这里。

标签:city,window,value,prop,qiankun,sandbox,沙箱,proxyWindow,属性
From: https://www.cnblogs.com/mounterLove/p/18087259

相关文章

  • 安全沙箱的资料
    Java官方文档JavaSEplatformsecurityarchitecture类BasicPermission类AudioPermission类AWTPermission类AuthPermission类SSLPermission类SerializablePermission类SQLPermission类RuntimePermission类NetPermission类PropertyPermission类Delegation......
  • 【鸿蒙ArkTs】沙箱内sqlite数据库db文件导入导出
    1.数据库在沙箱内位置沙箱文件目录官方文档说明获取数据库路径:let数据库路径='/data/storage/el2/database/entry/rdb/Mydata.db'2.数据库临时文件找到了数据库db文件,只导出这个db文件是没有用的。因为还有db-wal这个临时文件。系统并没有把数据全部写入db,甚至重启手机......
  • 全面解析 qiankun 源码
    本文将针对微前端框架qiankun的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是微前端。微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立......
  • 微前端qiankun框架子应用主和应用之间通信方法
    子应用主应用间如何通信qiankun官方提供了actions通信,qiankun内部使用initGlobalState(state)定义全局状态,该方法执行后返回一个MicroAppStateActions实例,实例中包含三个方法,分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。MicroAppStateActionsonGlob......
  • 微前端框架qiankun开发实战
     废话不多说先了解下在实践。1.什么是微前端web应用构建方式微前端 微前端在2016年ThoughtWorksTechnologyRadar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化,富交互化,也就是SPA应用;这样越来越......
  • Chrome安全沙箱
    Chrome有使用安全沙箱在限制的进程中,对文件,管道,进程,注册表等都有沙箱限制A.dll加载限制加载程序目录下一个dll,失败复制系统的一个dll过来加载,成功修改下这个dll,破坏签名加载,失败跟踪在LdrLoadDll失败可以检查源码相关TargetNtCreateSection,实际限制......
  • Gogs,支付宝沙箱支付,DevOps&CI/CD
    1.Gogs2.支付宝沙箱支付测试3.DevOps是生么4.CI/CD是什么1.Gogs是一款极易搭建的自助Git服务。Gogs的目标是打造一个最简单、最快速和最轻松的方式搭建自助Git服务。使用Go语言开发使得Gogs能够通过独立的二进制分发,并且支持Go语言支持的所有平台,包括Linux、Ma......
  • 反沙箱技术
    学习和记录各种反沙箱的手段,均使用go实现。在编写loader时可以直接拿来使用环境条件开机时长如果当前操作系统没有超过三十分钟就退出funcBootTime()bool{ kernel:=syscall.NewLazyDLL(string([]byte{ 'k','e','r','n','e','l','3','2......
  • U-Boot Sandbox 基础
    U-BootSandbox是一个仿真平台,可以用来调试u-boot的非架构相关代码。平台:ubuntu22.04forx86_641.开发环境Ubuntu22.04forx86_64.$sudoaptupdate$sudoaptinstallbuild-essentialflexbisongawktexinfolibsdl2-devpython3-setuptoolspython3-devswig......
  • qiankun 路径问题
    qiankun中的文件路径问题qiankun中entry为什么是长这样//hostname/subpath/?import-html-entry中,采用了newurl(entry,window.location);,详细参考MDN,简单说,它会采取当前的网络协议(http:/https:),然后拼接成entry,也就是http(s)......