HTML5 JavaScript-如何捕捉尝试从沙盒iframe中启动导航



我有一个不允许更改位置的沙盒iframe:

<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>

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

不安全的JavaScript尝试使用URL'http://example.com'从frafe用URL'http://otherdomaian.com启动帧导航。尝试导航的顶级窗口的框架是沙框的,但是未设置"允许脚步游动"标志。

这很棒,但我想抓住它,因此,如果发生这种情况,我将移至下一个iframe。那么我该如何捕捉此尝试?

编辑:

我添加了JSFIDDLE代码(在控制台日志中检查错误)

我还试图听一个没有成功的事件:

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

我在这里是新手能够完成您想要的。

我能够通过在DOM准备就绪后通过从上方运行的JSfiddle脚本来演示我的含义(没有警报,但控制台中仍然是错误)。这是有关该小提琴当前发生的事情的更多详细信息:

// 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!');
}

被捕获的例外与iframe无关,实际上是尝试在null值上设置src属性的类型错误。

您真正想做的就是捕获iframe的错误内部(当沙盒脚本试图访问window.top时),但由于具有相同的原始策略,这是不可能的。顺便说一句,设置"allow-same-origin"沙盒标志仅在与顶级文档相同的origin提供时,只有任何效果。例如。iFrame的srclocation更改为其他origin,就无法触摸内部任何东西。

有多种方法可以通过iframe边界进行通信,例如使用window.postMessage或使用IFRAME的location.hash的较旧的和黑客的方法,但我假设您不能影响进入iFrame的页面的来源。(当然,一个不错的开发人员会向建议开放,并看到这样的功能可能很有用。)

我能够在不违反任何浏览器安全策略的情况下捕获此错误的唯一方法是设置allow-top-navigation沙盒标志,然后在顶级文档中使用window.onbeforeunload处理程序来捕获iframe的导航尝试。我永远不会推荐这个,因为用户体验是可怕的。如果不提示用户是否要离开页面,就无法防止导航。下面的概念证明:

<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>

,不幸的是,如果没有您的第三方内容开发人员的帮助,我找不到在当前浏览器实现中完成此操作的任何方法。我在HTML5规格中读了一些有趣的东西,这些内容可能会使我们将来可以做类似的事情(不幸的是,我可以在这里插入的链接数量最大化),因此随着事情的进展,我会保持警惕。<<<<<<<<<<<<<<<<<<<<<<<</p>

示例:

有额外限制的一个:

<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe>

Sandbox属性在Internet Explorer 10,Firefox,Chrome和Safari中支持。

注意:Internet Explorer 9中不支持沙箱属性9 以及较早的版本,或在Opera中。

定义和用法

如果指定为一个空字符串(sandbox ="),则是沙盒属性 在内联内容中启用一组额外的限制 框架。

沙盒属性的值可以是一个空字符串(全部 应用限制),或预定的空间分隔列表 将消除特定限制的值。

HTML 4.01和HTML5

之间的差异

沙盒属性在html5中是新的。

语法

<iframe sandbox="value">

属性值

  1. " =>应用以下所有限制
  2. 允许same-origin =>允许将iframe内容视为与包含文档的起源相同的来源
  3. 允许top-navigation =>允许iframe内容从包含文档中导航(加载)内容
  4. 允许形式=>允许表单提交
  5. 允许scripts =>允许脚本执行

JavaScript:是一种怪异的URI协议。它在某些情况下工作,例如但不是全部 - 例如,窗口的位置无法设置为这样的URI。(虽然您可以将JavaScript:URI分配到窗口。Location作为运行脚本的真正回旋方式,但该窗口的位置无法保持设置为该值。)

要将内容写入iframe,请获取对框架文档的引用并写入其中。这样做将需要您设置允许式Origin沙盒标志。

<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe>

<script>
    var frame = document.getElementById("myframe");
    var fdoc = frame.contentDocument;
    fdoc.write("Hello world"); // or whatever
</script>

live示例: http://jsfiddle.net/wuvrf/1/ptch/p>

您现在可以这样做allow-top-navigation-by-user-activation

最新更新