在chrome扩展中使用tinyeditor wysiwyg编辑器时沙箱访问冲突

时间:2013-07-13 22:23:35

标签: iframe google-chrome-extension sandbox allow-same-origin tinyeditor

尝试在Chrome扩展程序中加载第三方wysiwyg编辑器时出现以下错误。

  

沙盒访问冲突:阻止了一个框架   “chrome-extension:// cmcjindomengjienigbcldekcfnhfped”访问   框架在“null”。两个框架都是沙盒,缺少框架   “允许同源”旗帜。

我最初遇到了类似的错误,并设法通过添加 allow-same-origin 标志来解决它。这导致另一个错误,需要允许脚本标志。以下是iframe元素的当前状态

<iframe sandbox="allow-same-origin allow-scripts" src="editor.html" width="350" height="350" style="border:none;"></iframe>

wysiwyg编辑器动态创建一个iframe来保存编辑器。我假设这可能会触发错误的第二个实例。我尝试在沙盒页面中创建的iframe上设置 allow-same-origin 标志,但这没有做任何事。

我可以尝试另类,但是,这也是一个学习冒险,我很乐意解决这个问题。

修改 我尝试用div替换动态创建的iframe只是为了看看会发生什么。我没有得到上面的错误,但正如预期的那样,当访问与iframe相关的属性时代码失败。这并不能证明新的iframe是问题,但确实可以。

编辑2 FWIW,下面的行是引发错误的地方

this.e = this.i.contentWindow.document;

我以前初始化为

this.i = document.createElement('iframe');

1 个答案:

答案 0 :(得分:2)

如果您对iframe进行沙盒处理,则无法从外部访问该内容。然后,您应该使用postMessage在用户代理之间进行通信。

通过在同一域上加载的iframe上同时使用allow-same-origin和allow-scripts,iframe可以删除沙盒属性。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-sandbox

  

当嵌入页面与包含iframe的页面具有相同的原点时,将allow-scripts和allow-same-origin关键字一起设置允许嵌入页面简单地删除sandbox属性然后重新加载自身,从而有效地突破沙箱一共。