iframe内嵌第三方页面，报跨域错误的原因有哪些

在浏览器的同源策略下，当一个网页的源与另一个网页的源不同，浏览器会认为它们属于不同的域，此时在页面中加载另一个域的资源就会产生跨域问题。iframe是一种嵌入式的HTML元素，允许在一个网页中嵌入另一个网页，如果iframe中嵌入的页面与父页面不同源，就会产生跨域问题。下面是导致iframe跨域错误的原因：

1.协议不同：父页面和子页面使用的协议不同，例如父页面使用https协议，而子页面使用http协议。

2.域名不同：父页面和子页面的域名不同，例如父页面的域名是example.com，而子页面的域名是abc.com。

3.端口不同：父页面和子页面的端口不同，例如父页面的端口是80，而子页面的端口是8080。

4.子域名不同：父页面和子页面的子域名不同，例如父页面的域名是example.com，而子页面的域名是test.example.com。

5.跨域限制：子页面的服务器设置了跨域限制，不允许其他域名的页面调用它的资源。

相关问题

iframe嵌入第三方页面主页面修改子页面的信息

### 使用 `postMessage` 进行跨域通信

为了实现从父窗口向嵌入的第三方页面（即子页面）发送信息并操作其中的元素或数据，可以采用 HTML5 提供的 `postMessage` API 来安全地执行跨源通信。具体方法如下：

#### 向子页面发送消息

当需要从主页面给内嵌于 `<iframe>` 的第三方页面传递信息时，可调用 `postMessage()` 方法，并指定接收方的 URL 或者通配符 '*' 表示不限定目标源。

// 假设有一个 id 为 "myFrame" 的 iframe 元素
var frame = document.getElementById('myFrame');
if (frame && frame.contentWindow) {
    // 向该 iframe 发送一条消息，第二个参数为目标站点地址
    frame.contentWindow.postMessage({action: 'updateContent', data: 'new value'}, '*');
}

此代码片段展示了如何构建一个简单的 JSON 对象作为消息体的一部分传送给子页面[^2]。

#### 接收来自父页面的消息

在子页面中监听 `message` 事件以便接收到由父页面发出的信息。一旦捕获到此类事件，则可以根据携带的内容采取相应行动，比如更新 DOM 结构或其他逻辑处理。

window.addEventListener('message', function(event){
    console.log(`Received message from ${event.origin}:`, event.data);
    
    if (typeof event.data === 'object' && event.data.action === 'updateContent'){
        // 更新特定区域的内容
        let targetElement = document.querySelector('#targetDiv');
        if(targetElement){
            targetElement.textContent = event.data.data;
        }
        
        // 可选：回复确认已成功更改内容
        event.source.postMessage('Content updated successfully.', event.origin);
    }
});

上述脚本说明了怎样解析所接受的数据包以及依据其指令改变网页上的某些部分；同时还能回执告知对方已完成请求的操作[^1]。

需要注意的是，在实际开发过程中应当谨慎设置允许交互的目标网址范围，避免潜在的安全风险。通常建议尽可能精确匹配预期合作伙伴的具体域名而非使用泛型字符'*'[^3]。

iframe嵌入第三方页面 tonken 免登录

### 使用 iframe 嵌入第三方页面并通过 Token 实现免登录

当将一个系统以 `iframe` 形式嵌入到第三方系统的页面中时，要实现无感免登录功能，主要面临两个挑战：一是如何安全有效地传递认证信息（如Token），二是解决跨域通信问题。

#### 1. 准备工作

确保主站与子站点之间存在有效的跨域资源共享(CORS)策略设置。这通常涉及到服务器端配置允许特定域名访问资源[^2]。

#### 2. 获取并传递 Token

假设已经有一个有效期内的 Token 可用于验证用户身份，则可以通过 URL 参数的方式将其附加到 iframe 的 src 属性后面：

<iframe id="myIframe" src="https://example.com?token=your_valid_token_here"></iframe>

这种方式简单直接，但需要注意安全性考量，比如对敏感数据加密处理以及防止CSRF攻击等措施。

#### 3. 处理 Cookie 和 Session 存储机制差异

由于浏览器的安全沙箱特性，在作为第三方加载的情况下，默认情况下 cookie 不会自动发送给被请求的服务端。因此建议改用 session 或其他服务端存储方式来保存用户的认证状态信息[^3]。

对于这种情况下的解决方案可以是在首次接收到带有合法 token 的请求后，由服务端创建一个新的 session 并关联该 token 对应的身份信息，之后每次请求都携带此 session ID 进行校验即可完成后续操作而无需再次提供原始 token。

#### 4. 跨域消息传递

为了让父窗口能够向内嵌的 iframe 发送必要的初始化参数（例如上述提到的 token），可利用 postMessage API 来建立两者间的通讯渠道。具体做法如下所示：

在父级页面调用 childWindow.postMessage() 方法:

var myFrame = document.getElementById('myIframe');
// 向子框架发送消息
myFrame.contentWindow.postMessage({type:'init', data:{'token':'your_valid_token'}}, '*'); 

而在 iframe 页面监听 message 事件接收来自外部的信息：

window.addEventListener('message', function(event){
    console.log(event.data); // { type: "init", data: {"token":"your_valid_token"}}
});

这种方法不仅解决了跨域限制的问题，同时也提高了整个流程的安全性和灵活性。