iframe子域名跨域

基础概念

iframe 是 HTML 中的一个元素，用于在当前页面中嵌入另一个 HTML 页面。跨域是指在一个域名的网页中加载另一个域名的资源，由于浏览器的同源策略（Same-Origin Policy），默认情况下，不同域名之间的资源是相互隔离的。

相关优势

1. 内容隔离：iframe 可以用来隔离不同域名的内容，防止恶意脚本跨域攻击。
2. 内容嵌入：可以方便地将其他网站的内容嵌入到自己的网站中，丰富页面内容。
3. 并行加载：iframe 中的内容可以并行加载，不会阻塞主页面的加载。

类型

1. 同源 iframe：嵌入的页面与主页面属于同一个域名。
2. 跨域 iframe：嵌入的页面与主页面属于不同的域名。

应用场景

1. 广告嵌入：网站可以将广告内容放在 iframe 中，广告内容可以来自不同的域名。
2. 第三方登录：网站可以使用 iframe 嵌入第三方登录页面，如微信登录、QQ 登录等。
3. 内容嵌入：网站可以将其他网站的内容嵌入到自己的页面中，如新闻、视频等。

遇到的问题及解决方法

问题：跨域 iframe 无法访问 iframe 中的内容

原因：浏览器的同源策略限制了不同域名之间的资源访问。

解决方法：

1. CORS（跨域资源共享）：在服务器端设置 Access-Control-Allow-Origin 头，允许特定的域名访问资源。
2. CORS（跨域资源共享）：在服务器端设置 Access-Control-Allow-Origin 头，允许特定的域名访问资源。
3. JSONP：利用 <script> 标签不受同源策略限制的特性，通过动态创建 <script> 标签来请求数据。
4. JSONP：利用 <script> 标签不受同源策略限制的特性，通过动态创建 <script> 标签来请求数据。
5. 代理服务器：通过在同一域名下设置一个代理服务器，将跨域请求转发到目标服务器。
6. 代理服务器：通过在同一域名下设置一个代理服务器，将跨域请求转发到目标服务器。
7. postMessage API：通过 postMessage API 在不同域名的窗口之间安全地传递消息。
8. postMessage API：通过 postMessage API 在不同域名的窗口之间安全地传递消息。

参考链接

• MDN Web Docs - iframe
• MDN Web Docs - CORS
• MDN Web Docs - postMessage

通过以上方法，可以有效地解决 iframe 子域名跨域的问题。