怎么看iframe是不是同源

检查一个iframe是否属于同源策略（Same-Origin Policy）可以查看其`src`属性的URL与包含它的网页的URL是否来自相同的协议、域名以及端口。如果它们完全匹配，那么就是同源的。以下是判断步骤：

1. 检查协议：确保iframe的`src`属性开始的协议（如http、https等）与当前页面的协议一致。
2. 检查域名：域名部分应完全匹配，包括顶级域和任何子域名。
3. 检查端口：默认情况下，如果端口没有明确指定，浏览器会假设`src`的端口和主页面相同。但如果指定了特定端口，则需要二者相等。

如果你正在编写JavaScript代码，可以使用`document.referrer`获取当前页面的URL，然后比较它和iframe的`src`。例如：

function isSameOrigin(iframe) {
    const referrer = document.referrer;
    const iframeSrc = new URL(iframe.src);
    return referrer === iframeSrc.origin; // 或者referrer.protocol + '//' + referrer.host === iframeSrc.protocol + '//' + iframeSrc.host;
}

相关问题

iframe 同源策略

同源策略是一种浏览器安全机制，用于限制一个源（域名、协议和端口）的文档或脚本如何与另一个源的资源进行交互。同源策略的目的是防止恶意网站通过脚本访问用户的敏感信息或执行恶意操作。

在同源策略下，一个源的文档或脚本只能与同一源的资源进行交互，不能直接访问其他源的资源。这意味着，如果一个页面中包含一个来自不同源的iframe元素，那么该iframe中的文档或脚本将无法直接访问父页面的DOM，也无法通过常规的方式与父页面进行通信。

然而，同源策略并不是绝对的，有一些方法可以绕过同源策略实现跨域访问，其中包括以下几种常见的方法：
1. JSONP跨域：通过动态创建`<script>`标签，将跨域请求的数据作为回调函数的参数返回到页面中。
2. document.domain + iframe跨域：当两个页面的域名相同但是子域不同，可以通过设置`document.domain`属性来实现跨域访问。
3. location.hash + iframe跨域：通过改变iframe的URL的hash值来传递数据，从而实现跨域通信。
4. window.name + iframe跨域：通过在iframe的`window.name`属性中存储数据，实现跨域通信。
5. postMessage跨域：通过使用`window.postMessage()`方法在不同窗口之间传递消息，实现跨域通信。
6. 跨域资源共享（CORS）：在服务器端设置响应头，允许指定的源进行跨域访问。
7. nginx代理跨域：通过配置nginx服务器代理请求，实现跨域访问。
8. nodejs中间件代理跨域：通过使用nodejs中间件代理请求，实现跨域访问。
9. WebSocket协议跨域：通过WebSocket协议进行跨域通信。

总结起来，同源策略是浏览器的一种安全机制，限制了不同源之间的交互。但是通过一些特定的方法，可以实现跨域访问和通信。

vue获取iframe元素 非同源

在Vue.js中，由于浏览器的安全策略（同源策略），如果你尝试从非同源的iframe（即来源不同的iframe）直接访问其内容，可能会遇到跨域限制，不允许读取或操作iframe内的DOM。但是，有一些方法可以绕过这个问题：

1. 利用`postMessage` API：通过在父页面发送消息到iframe，然后让iframe内部处理并返回数据。你可以监听`message`事件并在适当的时候从iframe接收响应。

// 父组件
new Vue({
  methods: {
    sendMessageToIframe(iframeId, message) {
      const iframe = document.getElementById(iframeId);
      if (iframe.contentWindow.postMessage) {
        iframe.contentWindow.postMessage(message, iframe.src);
      }
    },
    handleResponseFromIframe(event) {
      if (event.origin !== window.location.origin) return;
      // 处理接收到的消息
      console.log('Received:', event.data);
    }
  }
});

// 如果rame内的脚本
window.addEventListener('message', function(e) {
  // 当接收到父页面的消息时
  parent.vueComponent.handleResponseFromIframe(e);
});

2. JSONP（JSON with Padding）：虽然不是原生的Vue方法，但在特定条件下，可以创建一个script标签并设置src属性为iframe的URL，然后在回调函数中解析返回的数据。

function getIFrameContent(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=parent.' + callback;
  document.head.appendChild(script);
}

getIFrameContent('https://example.com/api/data?callback=handleData', 'handleData');
function handleData(data) {
  // 解析和处理data
}

注意：这些方法都有其局限性，并不是所有情况都适用。如果安全性和隐私政策允许，建议考虑服务器端代理或者 CORS 设置，以避免跨域问题。