微应用请求的静态资源如何避免被基座劫持为fetch 而是保持原有的引入方式？（添加ignore只能解决第一层）

huchaolin commented 2 years ago

问题描述

微应用内部需要引入第三方资源，如引入以下内容A(百度地图MapVGL) :

<script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥" ignore>
 </script>

上面的A资源返回的内容为 B :

(function(){
window.BMAP_PROTOCOL = "https";
 window.BMapGL_loadScriptTime = (new Date).getTime(); 
document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=你的密钥&services=&t=20220719204638"></script>');
document.write('<link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>');
})();

能看到B中有通过<script>或 <link>的方式去再次请求非同源的资源的方式，如何避免内容B中的请求地址不会被基座劫持为fetch请求，而是按原有请求方式引入？难道只能通过在第三方资源那里加白名单或者自己搭个api中间层进行转发来避免跨域吗（不现实，因为请求的资源地址是未知的）？

ps: 另外我试过将整个资源放到基座去请求，再在微应用中以window.rawWindow的方式去使用挂载到基座window的方法，虽然没有报错，但是地图组件并未正常渲染；

复现步骤

如上述

环境信息

micro-app版本："@micro-zoe/micro-app": "0.8.8"
主应用前端框架&版本："react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.3.3"
子应用前端框架&版本："react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.3",
构建工具&版本："webpack": "^5.64.0",

bailicangdu commented 2 years ago

不被fetch拦截就无法放入沙箱，效果和在基座中直接引入是一样的

bailicangdu commented 2 years ago

由于第三方文件无法控制，还可以将地图js下载到本地引入

huchaolin commented 2 years ago

由于第三方文件无法控制，还可以将地图js下载到本地引入

下载到本地不行啊，因为js里面还有通过动态创建document.createElement("script")的方式去添加的别的js资源

huchaolin commented 2 years ago

由于第三方文件无法控制，还可以将地图js下载到本地引入

你们啥事微应用用一下百度地图就知道了，不是说简简单单放到基座或者直接下载下来那么简单。。。

iYogic2 commented 11 months ago

按此操作 do like this: https://github.com/micro-zoe/micro-app/issues/1009

micro-zoe / micro-app