同源iframe什么意思？-猿码集

同源iframe是什么？

在前端开发中，我们经常会遇到需要在网页中嵌入其他网站的内容的需求。此时，就可以使用iframe标签来实现。但是，iframe的使用也有限制，其中之一就是同源策略。

什么是同源策略？

同源策略是浏览器的一项安全措施，在默认情况下，它会限制一个文档或脚本如何和另一个源的资源进行交互。同源指的是域名、协议、端口号都相同，只有这三者完全一致时，才称为同源。

同源策略的目的在于保护用户隐私和安全，防止恶意站点对用户的信息进行攻击。例如，有人可以设置一个带有iframe的站点，来钓鱼某个网站的用户，造成用户信息泄漏，从而产生不必要的损失。

同源iframe的限制

由于同源策略的限制，使用iframe标签嵌入其他站点的内容，会受到以下限制：

无法访问父文档中的任何信息

无法通过脚本修改父窗口，或通过脚本接收来自父窗口的信息

无法通过Ajax等方式与其他源进行数据交互

由于上述限制，所以同源iframe只能显示其他站点的内容，无法与之交互。

如何跨域使用iframe？

如果我们需要在网页中嵌入其他源的内容，就需要使用跨域iframe。其中，主要有两种跨域方式：

1. 第三方Cookie设置

如果两个站点都允许使用cookie，并且cookie的域名设置相同，就可以通过cookie的方式实现跨域。例如，在站点A中使用iframe嵌入站点B的内容，可以在站点B中设置cookie，然后在站点A中访问站点B时，携带cookie。

<iframe src="https://www.example.com/" allow="encrypted-media" 
        sandbox="allow-scripts allow-same-origin">
</iframe>

2. Post Message

通过window.postMessage()方法，在跨域的iframe之间传递消息。通过该方法，可以在不同源之间通信，并且避免了通过父文档传递数据的安全限制。例如：

// 发送消息
window.parent.postMessage('message', 'https://www.example.com');
// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin === 'https://www.example.com') {
    console.log(event.data);
  }
});

上述代码中，通过postMessage方法发送消息，使用addEventListener监听接收到的消息，并在读取origin属性后读取传递的数据。

同源iframe的应用场景

同源iframe虽然受到严格的限制，但在一些场景下，它也有着广泛的应用，例如：

1. 弹出框

在我们开发弹出框时，经常会使用iframe嵌入目标页面，以达到异步加载的效果。

<iframe src="https://www.example.com/">
</iframe>

上述代码中，我们可以在弹出框中嵌入其他站点的内容，使得弹出框的加载速度更快。

2. 广告展示

网站中广告的展示通常会采用iframe的形式，这样可以让广告内容固定在一个地方，并且与其他内容分离，不会影响网页内容的布局。

<iframe src="https://www.example.com/ad.html">
</iframe>

3. 地图API

如果我们需要在网页中嵌入某个地图API，例如百度地图或者高德地图，可以使用iframe实现。在该API中，iframe可以嵌入一个单独的页面，用于地图的显示和交互。

<iframe src="https://apis.map.baidu.com/">
</iframe>

总结

同源iframe是网页开发中常用的功能之一，它可以让我们在网页中嵌入其他站点的内容，但是受到同源策略的限制，无法进行跨站点数据交互。开发人员应该遵循安全规范，避免iframe被恶意网站攻击。

同源iframe什么意思？