页面嵌入第三方系统方案小结

1. 背景介绍

        本文主要介绍页面嵌入到第三方系统的两个方案。分为三个步骤，页面嵌入、请求跨域、访问认证。

 

2. 页面嵌入方案

        页面嵌入方案有 “iframe标签嵌入” 和 “SDK代码嵌入”。两种方案的灵活性和性能各不相同，下面介绍一下两者的差异。

2.1. iframe标签嵌入

        iframe嵌入是目前使用很广泛的一种嵌入方案，直接使用iframe标签+网页地址就可以嵌入。优点是“主页面和嵌入页面相互隔离，不存在脚本冲突，样式影响问题”。缺点是“iframe标签性能消耗较大，过多的iframe标签会造成页面卡顿”。iframe主子页面之间只能通过window.postMessage来通信，大数据量时性能较差。

2.2. SDK代码嵌入

        SDK代码嵌入是直接引用嵌入看板的js资源，代码调用js中的sdk来渲染出嵌入页。优点是“可以灵活的与嵌入页的js组件做交互，且不会有iframe标签的性能问题”。缺点是“前端可能存在不同代码库或样式冲突问题”。通信方式可以使用SDK内的生命周期方法或直接操作指定的DOM元素。

3. 请求跨域方案

        浏览器与服务器之间的通过 HTTP 协议交互。HTTP 协议本身是一个无状态协议，即对不同用户的请求没有记忆能力。为了区分不同用户的会话状态所以有了 Cookie 和 Session 。Cookie 是浏览器存储的用户信息，Session 是服务器存储的用户信息。用户的在浏览器上的每次请求都携带 Cookie ，使服务器能够关联到对应的 Session 登录状态。

        为了保证 A 网页设置的用户 Cookie，B 网页不能打开，1995 年 Netscape 公司引入了同源策略到浏览器中，目前所有浏览器都有这个策略。而两个网