1. 前言
一般来说iframe的使用场景并不多，因此我之前对使用iframe可能遇到的坑了解的也不多，正好最近有个需求用到了iframe，这里就开个相关坑点的总结文章，方便自己遇到iframe问题时可以随时查看随时记录。
2. iframe优点
- 初期开发时的心智负担确实小，只需要创建个iframe标签就搞定了。
- 页面隔离效果明显，不用像微前端框架一样需要花心思解决css/js等资源的污染问题。
3. iframe坑点
3.1 跨域问题
使用iframe必会遇到跨域引出的一系列问题，想要与iframe内部进行通信，或对其内部页面做一些操作，就需要使用postMessage做通信，如果没有嵌入页面内部的配合，父页面很难直接对嵌套页面做操作。
3.2 安全策略限制问题
使用iframe后，会遇到针对iframe的各种安全限制。
-
如果被嵌套页面使用了X-Frame-Options或Content Security Policy等网络策略，嵌套iframe的父级就需要遵循这些策略限制，否则网页无法正常显示。
-
chrome50以后版本的浏览器，SameSite值默认是Lax，导致iframe内的页面cookie功能无法被支持，需要页面在Response头中将SameSite值设置为None，确保iframe中的cookie不被浏览器安全策略限制住。
目前SameSite有三个常用的值Strict, Lax, None，他们的作用是对跨站请求的cookie做不同程度的限制，而根据请求的不同，其对应关系如下：
3.3 iframe跳转问题
-
iframe内部重定向时，可能会导致父级页面也被重定向，因此需要通过iframe的sandbox属性限制allow-top-navigation，确保iframe跳转不影响父级navigation。
-
iframe内部的history会受父级history的影响，比如父级页面下面有多个iframe，它们实际上是共享同一个history链，如果这几个iframe按顺序进行跳转，则触发父级的前进、后退时，会发现依次触发了不同iframe的跳转，而不是不同iframe之间的history彼此独立不影响的。要解决这个问题，可以在iframe中的页面再调用iframe，最内层的这个iframe才是指向真正的页面，相当于嵌套了双层iframe，这样一来真正的iframe history就永远只对应第一层的iframe，也就不受最外层父级history的影响了。
