html5 javascript-如何捕获试图启动导航的沙盒iframe? [英] html5 javascript- How to catch attempt to initiate navigation out of sandboxed iframe?

查看:449
本文介绍了html5 javascript-如何捕获试图启动导航的沙盒iframe?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

 < iframe sandbox =允许表单允许-popups allow-pointer-lock allow-same-origin allow-scriptsclass =iframe visiblesrc =thesource.htmlwidth =100%scrolling =autoframeborder =0>< /的iframe> 

如果iframe尝试取消自我定位或更改位置,我会看到一个空白页面,因为浏览器会停止iframe操作。这是Chrome的日志:


不安全的JavaScript尝试使用网址 http://example.com '与网址 http:// otherdomaian .COM 。尝试顶层窗口导航的框架已经过沙盒处理,但'allow-top-navigation'标志没有设置。

这很棒,但我想抓住这个,所以如果发生这种情况,我会转向下一个iframe。那么我该如何抓住这次尝试呢?



编辑:

jsfiddle代码(检查控制台日志中的错误)



  document.addEventListener('error',receiveMessage,true)我也试着听一个没有成功的事件: ; 
函数receiveMessage(错误){
alert(iframe试图自我解构);


解决方案

没有足够的声誉评论答案,我很抱歉如果我做错了,但接受的解决方案将不幸地不能完成你正在寻找的东西。

我已经能够证明我的意思了,只要DOM准备就绪,就可以运行上面的JSFiddle的脚本(在控制台中不会有任何警报但仍然存在错误)。以下是关于当前使用该小提琴的详细信息:

  //使用No wrap-in< head>选项
var frame = document.querySelector('iframe'); // null,iframe不存在
try {
frame.src =http://wedesignthemes.com/themes/redirect.php?theme=wedding;
} catch(e){
// TypeError here,没有关于iframe的提示:(
alert('Error!');
}

被捕获的异常与iframe无关,它实际上是一种尝试设置<$ c对于 null 值,$ c> src 属性。



您真正想要的是什么do是捕获iframe中的错误内部(当沙盒脚本尝试访问 window.top )时,但这是不可能的,因为同源政策。顺便说一句,设置<$ c $当iframe内容由相同的 origin 作为最高级别提供时,c>允许同源沙箱标志仅具有任何效果例如,iframe中的 src 位置更改为不同的来源无法触碰任何内容



可以通过 iframe 边界,比如 window.postMessage 或者使用iframe的位置.hash ,但我假设您不会影响进入iframe的页面源。 (一位优秀的开发人员当然愿意接受建议,并看到像这样的功能可能会有用。)



唯一能够在没有违反任何浏览器安全策略是设置 allow-top-navigation 沙箱标志,然后使用窗口.onbeforeunload 处理程序在顶级文档中捕获来自子< iframe 的导航尝试。我永远不会推荐这个,因为用户体验很糟糕。如果不提示用户是否要离开页面,则无法阻止导航。

 < iframe id =myframesandbox =allow-scripts allow-top-navigation> ;< / iframe中> 
< script>
var url =http://wedesignthemes.com/themes/redirect.php?theme=wedding,
frame = document.getElementById(myframe),
listener;
listener = window.addEventListener(beforeunload,function(e){
e.preventDefault();
e.stopImmediatePropagation();
// iframe试图破坏
window.removeEventListener(beforeunload,listener);
return这是不可避免的,你不能在不提示用户的情况下快捷地进行+
导航尝试;
});
frame.src = url;
< / script>

很遗憾,我找不到任何方法可以在您没有第三方内容开发商。我在HTML5规范中阅读了一些有趣的东西,可能会允许我们在将来做这样的事情(而且不幸的是我可以在这里插入的链接数量最多),所以我会随着事情的进展而留意。 / p>

I have an sandboxed iframe that doesn't allow changing location:

<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" class="iframe visible" src="thesource.html" width="100%" scrolling="auto" frameborder="0"></iframe>

If the iframe tries to unframe itself or change location I see a blank page because the browser stops the iframe's operation. This is the log from Chrome:

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://example.com' from frame with URL 'http://otherdomaian.com'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set.

That is great but I want to catch this so if it happens I'll move to the next iframe. So how do I catch this attempt?

EDIT:

I added a jsfiddle code (check the error in the console log)

I also tried to listen for an event with no success:

document.addEventListener('error', receiveMessage, true);
function receiveMessage(error) {
    alert("iframe tried to unframe itself");
}

解决方案

I am new here so I don't have enough reputation to comment on answers and I apologize if I am doing this wrong, but the accepted solution will unfortunately not be able to accomplish what you are looking for.

I was able to demonstrate what I mean by having the script from the JSFiddle above run once the DOM is ready (there will be no alert but still an error in the console). Here's a little more detail on what happens currently with that fiddle:

// running with the No wrap - in <head> option
var frame = document.querySelector('iframe'); // null, the iframe isn't there yet
try {
    frame.src="http://wedesignthemes.com/themes/redirect.php?theme=wedding";
} catch(e) {
    // TypeError here, no hints about the iframe :(
    alert('Error!');
}

The exception that is being caught has nothing to do with the iframe, it is actually a type error from trying to set the src property on a null value.

What you really want to do is catch the error inside of the iframe (when the sandboxed script tries to access window.top), but this is not possible because of the Same-origin policy. Btw, setting the "allow-same-origin" sandbox flag only has any effect when the iframe content is being served from the same origin as the top level document. E.g. as soon as the src or location of the iframe is changed to a different origin, there's no way to touch anything inside.

There are ways to communicate across iframe boundaries, such as with window.postMessage or the older and hackier way of using the iframe's location.hash, but I am assuming you can't affect the source of the page going into your iframe. (A nice developer would of course be open to suggestions and see that a feature like this could be useful.)

The only way that I was able to catch this error without violating any browser security policies was to set the allow-top-navigation sandbox flag and then use the window.onbeforeunload handler in the top level document to catch the navigation attempt from the child iframe. I would never recommend this because the user experience is awful. There is no way to prevent the navigation without prompting the user about whether they want to leave the page or not. Proof of concept below:

<iframe id="myframe" sandbox="allow-scripts allow-top-navigation"></iframe>
<script>
  var url = "http://wedesignthemes.com/themes/redirect.php?theme=wedding",
      frame = document.getElementById("myframe"),
      listener;
  listener = window.addEventListener("beforeunload", function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
      // The iframe tried to bust out!
      window.removeEventListener("beforeunload", listener);
      return "This is unavoidable, you cannot shortcut a " +
             "navigation attempt without prompting the user";
  });
  frame.src = url;
</script>

So unfortunately I can't find any ways to do this nicely in current browser implementations without help from your 3rd party content developer. I read some interesting things in the HTML5 spec that might allow us to do things like this in the future (and am unfortunately maxed out on my number of links I can insert here), so I would keep an eye out as things progress.

这篇关于html5 javascript-如何捕获试图启动导航的沙盒iframe?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆