Javascript，跟踪iframe重定向顶部窗口 [英] Javascript, track iframes redirecting top window

问题描述

由于除了沙盒之外无法阻止iframe重定向顶部框架，这会阻止可见度跟踪所需的其他功能，我想跟踪重定向。由于一个站点可以有多个iframe，因此可以是其中任何一个。

Since there is no way to prevent an iframe from redirecting the top frame besides sandboxing which prevents other features required for viewability tracking I would like to track redirects. Since one site can have more than one iframe, it could be any of these.

有没有办法跟踪/找出哪一个（特定的iframe）导致顶部框架重定向？

Is there any way to track/find out which one (specific iframe) caused the top frame redirect?

这是一个沙箱（使用浏览器控制台并启用保留日志）：

Here is a sandbox (use browser console and enable preserve log):

注意 iframe内容通常是跨域的。为了方便使用，它在sandox中。

Note the iframe content is usually cross domain. For ease of use its within the sandox.

推荐答案

我们可以通过像这样的东西来访问iframe内容iframe.contentWindow.document 但如果我们遵守同源，这是可能的。政策。

We can access to the iframe content with somethig like iframe.contentWindow.document but this is possible if we observe Same-origin policy.

另一种方法可能是设置 Content-Security-Policy 标题如：

Another approach could be setting a Content-Security-Policy header like:

<meta http-equiv="Content-Security-Policy" content="frame-src http://example.com">

父页面中的此标题可防止加载与 http://example.com ，还有一种方法可以报告发送帖子的拒绝行为但遗憾的是无法使用进行设置< meta> 标记（它只是服务器端）。通过这种方法，我们必须执行一个白名单，所以我认为在这种情况下它可能没用。但是，如果第一次给出白名单，则可以设置所有可用站点，因此当iframe重定向时，浏览器将拒绝加载它。

This header in the parent page prevents to load sites different to http://example.com in frames, There is also a way to report the refuse behavior sending a post but unfortunately can't be setting with <meta> tag (it's only server side). With this approach we have to perform a white list, so I think maybe it's not useful in this case. But, if the white list is given the first time, is possible to set all sites available, so when the iframe redirect, browser will refuse to load it.

如果不是同源的情况和执行白名单的可能性，那么我认为我们能做的更好就是调用iframe onunload 事件，不幸的是iframe页面不仅在重定向时重新加载，也将触发事件。我认为这是最接近的方法。为此，此代码可以正常工作。

If it's not the case of same-origin and the possibility of performing a white list, then I think the better we can do is calling iframe onunload event, unfortunately this event are going to be fired also when iframe page reloads not only on redirection. I think it's the closest approach. To achieve that, this code works.

var srcs = ["iframe2.html","iframe.html","iframe2.html"];


        for (let i = 0; i < srcs.length; i++) {
            var iframe = document.createElement('iframe'); 
                iframe.src = srcs[i]; 
                iframe.name = "i"+i; 
                document.body.appendChild(iframe);
                window["i"+i].onunload = function(){console.log("change "+i)}
        }

当所有iframe加载时，第一次触发 onunload ，因此重定向是第2个，依此类推。但我们可以排除第一种情况。

Of course onunload is fired the first time, when all iframes load, so redirections are 2th 3th and so on. But we could exclude that first case.

这里有一个完整的例子 https://codesandbox.io/s/o16yk7mqy ，我创建了iframe3.html，它既没有刷新也没有重新加载以显示明确的要点。我还创建了一个简单的重定向列表或重新加载iframe。

Here a full example https://codesandbox.io/s/o16yk7mqy , I've created iframe3.html that doesn't refresh neither reload to show clearly the point. Also I've created a simple List of redirect or reload iframes.

更新
据我所知，你想要的是使用沙盒属性设置iframe并将所有你想要的内容列入白名单但没有 allow-top-navigation ，类似于：

UPDATE As I understand now, what you want is to set iframes with sandbox property and whitelist all what you want but without allow-top-navigation, something like:

<iframe src="iframe.html" sandbox="allow-script allow-forms allow-popups allow-pointer-lock allow-same-origin"></iframe>

• 此示例不允许允许 - 顶部导航 https://codesandbox.io/s/lpmv6wr6y9


• 此处的示例 https://codesandbox.io/s/4x8v1mojq7允许 allow-top-navigation 但 codesandbox 会阻止帧重定向，所以如果我们尝试 https://4x8v1mojq7.codesandbox.io/ 这是由 codesandbox 创建的网址，我们可以看到顶部框架重新加载。


• This Example doesn't allow allow-top-navigation https://codesandbox.io/s/lpmv6wr6y9
• This Example here https://codesandbox.io/s/4x8v1mojq7 allow allow-top-navigation but codesandbox prevents the frame to redirect so if we try https://4x8v1mojq7.codesandbox.io/ that is the url created by codesandbox, we could see the top frame reload.

正如我在评论中所说的那样，至少是Chrome 64.0.3282.167，当我们在iframe尝试时委托除了允许顶部导航之外的所有内容重定向顶部框架，它抛出异常。 Firefox中的行为不同（至少58.0.2）。 Firefox拒绝顶级导航，但继续使用代码。

As I said in comments, at least Chrome 64.0.3282.167, when we delegate all but allow-top-navigation when the iframe attempt to redirect top frame, it throw an exception. The behavior is different in Firefox (at least 58.0.2). Firefox deny top navigation but continues with the code.

所以，作为结论，我认为最好的方法是sanbox和onunload的组合，或者只是onunload。当然，如果可能，Content-Security-Policy是最安全，更灵活的方式。这取决于实施。我认为不要让服务器端代码执行完美的解决方案几乎是不可能的。有白名单要检查，例如此API https://developers.google.com/safe -browsing / v4 / 并且有黑名单要检查，看看这篇文章 https://security.stackexchange.com/questions/32058/looking-for-url-blacklists-of-malicious-websites 。

So, as conclusion the best approach in my opinion is or a combination of sanbox and onunload or just onunload. Of course, if it could be possible, Content-Security-Policy is the safest and more flexible way. It depends of the implementation. It's almost impossible I think not to involve server side code to perform a perfect solution. There are white list to check, like this API https://developers.google.com/safe-browsing/v4/ and there are black list to check, look at this post https://security.stackexchange.com/questions/32058/looking-for-url-blacklists-of-malicious-websites .

这篇关于Javascript，跟踪iframe重定向顶部窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！