在使用HTML5开发WebApp过程中，嵌入第三方应用时，使用到iframe，在嵌入的应用中点击返回WebApp框架，出现问题了，如下图所示：

 

 

报错信息如下：

 

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://xxxx' from frame with URL 'http://yyyy'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture.

 

大概的意思是浏览器监测到了iframe中存在不安全的链接正在尝试进行导航。

 

二、问题解决原理

 

在HTML5页面中，可以使用iframe的sandbox属性

 

<iframe src="https://xxx.yyy.com?id=zzz">

 

如果未添加sandbox属性，或者添加了sandbox但是后面不加任何值，就代表采用默认的安全策略，即：iframe的页面将会被当做一个独自的源，同时不能提交表单，以及执行javascript脚本，也不能让包含iframe的父页面导航到其他地方，所有的插件，如flash,applet等也全部不能起作用。简单说iframe就只剩下一个展示的功能，正如他的名字一样，所有的内容都被放入了一个单独的沙盒中。

 

sandbox包含的属性及作用：

 

allow-forms ：允许进行提交表单；

 

allow-scripts ：运行执行脚本；

 

allow-same-origin： 允许同域请求，比如ajax,storage；

 

allow-top-navigation： 允许iframe能够主导window.top进行页面跳转；

 

allow-popups： 允许iframe中弹出新窗口，比如,window.open,target=”_blank”；

 

allow-pointer-lock： 在iframe中可以锁定鼠标，主要和鼠标锁定有关。

 

三、解决方案

 

在iframe加上这个代码之后 sandbox="allow-scripts allow-top-navigation allow-same-origin"，刷新页面再验证一下，就可以正常跳转啦！