iframe方案的微前端
iframe是最简单也是最原始的微前端方案，通过在页面添加iframe引入不同的应用，即可实现微前端。
而且浏览器对iframe打开的页面还有天然的沙箱隔离，会更加的安全。
沙箱隔离
浏览器中会对进程隔离，而一个tab页基本就是一个进程，iframe如果和主页面同站会共享进程，否则也会新开进程。
浏览器的隔离策略
沙箱隔离
因为Web应用运行在浏览器的Renderer进程中，浏览器为了安全性考虑，会通过Browser进程对这些Renderer进程进行隔离，以防止恶意代码对系统造成破坏。
浏览器的沙箱隔离是进程粒度的，进程之间通过IPC通信，有个Broker进程对Target进程进行管理。 在浏览器中，Broker进程就是Browser进程，Target进程就是Renderer进程。
站点隔离
在旧版浏览器中，会存在多个Web应用共享一个Renderer进程的情况，这种情况沙箱进程是无能为力的。 此时浏览器是依靠同源策略来限制不同源的文档之间的交互，帮助隔离恶意文档以降低安全风险。
NOTE
多见于主页面和内部的iframe，古早的版本是没有版本隔离的，主页面和iframe页面会共享一个Renderer进程。
共享一个Renderer进程的情况，可能导致以下安全问题：
- 可获取其他Web应用的cookie信息
- 可获取Web应用的HTML等信息
- 授权信息也会被获取
Chrome67版本之后，引入了Site Isolation，即站点隔离，将不同站点的文档放在不同的Renderer进程中，基于沙箱隔离来降低安全风险。
同站和同源的区分：
- 同源：协议、主机名、端口号都要相同
- 同站：有效顶级域名以及二级域名相同，即为同站
NOTE
注意这里的有效顶级域名eTLD并不是指顶级域名，而是有一个列表：https://publicsuffix.org/list/public_suffix_list.dat
实现
微前端需要：
- 一个主应用，主应用中提供了导航以及内容区
- 导航：用于切换不同的微应用
- 内容区：用于展示微应用
- 多个微应用。
iframe的实现方式很简单：
- 创建一个react项目，作为微应用
- 再创建一个vue项目，还是作为微应用
- 可以再创建一个react项目，作为主应用，主应用中通过切换路由来切换不同的微应用
也就是说，只需要在主应用中将页面路由映射到不同的微应用即可。在主应用中切换路由，会切换对应的iframe地址，从而引入不同的微应用。
优点
- 基于浏览器的沙箱隔离，是有着天然的隔离的，对于集成第三方应用来说是很方便的，而且也很安全。
- 还有就是移植性和复用性好，可以很方便的嵌入到不同的主应用中。
缺点
- 主应用刷新时，iframe应用的url会重置。
- 主应用和iframe应用处于不同的浏览器上下文，两个文档是隔离开的，所以样式可能会有一些问题。
- 主应用和iframe应用的数据状态同步问题。
- 另外还有一些移动端的兼容、加载性能、SEO等问题。