当原点不同时从 iframe 获取 url

Question

当用户通过单击 iframe 中的链接进行重定向时，我想从 iframe 获取 URL。 iframe 的来源与网络应用不同。

例如：

<iframe src="startingUrl" class="embed-responsive-item" id="iframe" sandbox="" allowfullscreen</iframe>

我在 iframe 上添加了一个负载侦听器，以检测用户何时重定向到此 iframe 中的其他 url：

const iframe = document.getElementById("iframe");

iframe.addEventListener("load", (evt) => {
    const location = iframe.contentWindow.location;

    console.log(location); // this gives me a Location object where I can see the href property
    console.log(location.href); // this gives me a SecurityError: Permission denied to get property "href" on cross-origin object, I also tried to get a copy of the object but that doesn't work either.
});

我知道是什么导致了这个问题，我也知道这是不可能的。但我需要找到一种方法来获取页面的当前 URL。如果这不行，那么我希望使用此 Web 应用程序的用户可以复制 iframe 的 url 并将其放在输入字段中。

现在他们可以在 chrome 中执行“查看框架源”和此框架：在 Firefox 中查看框架源或信息。但这对用户来说太复杂了。有没有办法让他们在 iFrame 中看到 URL，或者让用户更简单地获取 URL。

iFrame 中的网站不是我的。

非常感谢所有帮助！

Answer 1

简短回答：这是不行的，除非您的 iframe 中有其他网站的支持，并且他们愿意在 @박상수 回答中添加代码。

更长的答案：你可以设置一个代理服务器来注入所需的代码来完成这项工作，但是你会遇到法律和道德上的困难，所以我不打算解释如何深入研究。

另一种方法可能是创建浏览器扩展程序并让您的用户安装它。我应该再次指出，FaceBook 过去曾在采用这种方法时遇到过道德问题。

最终，它们是很好的安全原因，为什么浏览器会阻止您这样做，您可能应该尊重这些原因而不是这样做。

Answer 2

如果您没有看到下面的代码，请查看下面的链接。

console.log(iframe.src);

查看此链接

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');

window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data! 
    if (event.origin.startsWith('http://your-first-site.com')) { 
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data); 
    } else {
        // The data was NOT sent from your site! 
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return; 
    } 
}); 

Answer 3

你会想要覆盖自动抛出的错误：

const iframe = document.getElementById('iframe');
iframe.addEventListener('load', evt => {
  const loc = iframe.contentWindow.location;
  try{
    loc.href;
  }
  catch(e){
    if(e.name === 'SecurityError'){
      console.log(iframe.src);
    }
  }
});

<iframe src='https://example.com' class='embed-responsive-item' id='iframe' sandbox='' allowfullscreen></iframe>