本地xmlhttprequest从镀铬打包的应用程序中的沙盒页面 [英] local xmlhttprequest from sandboxed page in chrome packaged app

问题描述

我有一个打包的应用程序，将应用程序本地页面嵌入到iframe中（用于嵌入图书馆来执行禁用内容）。
我的沙盒页面希望将xmlhttprequest创建为相对URL（仍位于相同的扩展名中），但会被以下消息拒绝：

XMLHttpRequest无法加载
chrome-extension：//nilibhiopchihkgnnecfblfjegmogpgn/libs/fonts/miss_fajardose/MissFajardose-Regular.ttf。
请求的
资源上没有'Access-Control-Allow-Origin'标题。 Origin'null'因此不被允许访问。

说实话，我找到了相关的文档：

• http：// developer .chrome.com / apps / manifest / sandbox.html



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

  
  
  

  但他们对我没有意义，也许是颜色和ADD的混合。
  
  
  

  有点上下文：我在我的chrome web应用程序和Internet上使用相同的代码，在这种情况下，我我正在加载一种字体，排版某些东西并计算一条用于绘制文本轮廓的刀具路径。如果该页面是Chrome应用程序，则会有一个按钮将其发送到路由器，如果它在网络上，则可以看到该工具路径。

  解决方案

在我生命的大约半天时间里，我找到了最好的解决方法。从沙盒页面，postmessage到父节点要求加载本地文件：

  window.top.postMessage（{XMLFile：levels /foo.xml}，*）; 
  

在nonsandboxed页面中，启动文件的异步加载，然后使用字符串回调到沙箱页面文件版本：

  document.body.onload = function（）{
 //监听请求消息子窗口
 window.addEventListener（message，function（event）{
 if（event.data.XMLFile）{
 //载入所请求的XML文件，必须是异步
 var xhttp = new XMLHttpRequest（）; 
 
 xhttp.open（GET，event.data.XMLFile，true）; 
 xhttp.send（null）; 
 
 //加载后，将结果XML传递回沙盒页面
 xhttp.onload = function（e）{
 document.getElementById（idSandbox）。contentWindow.postMessage（{sResponseText： xhttp.responseText}，'*'）; 
} 
} 
}）; 
} 
  

返回沙盒页面，当您收到xml响应文本时，将其转换返回一个DOM对象进行解析：

  //从包含窗口接收消息
 window.addEventListener（message ，function（event）{
 //检索到的XML文件
 if（event.data.sResponseText）{
 parser = new DOMParser（）; 
 xmlDoc = parser.parseFromString（event .data.sResponseText，text / xml）; 
 
 onAfterLoadLevel（xmlDoc）; 
} 
}）; 
  

顺便说一下，该whatwg页面上的颜色混合会触发ADD已经有了它。其他参考页面没用。关于这个问题有很多讨论，但没有人发布代码，所以我想我会在这里做。

I have a packaged app that embeds a app-local page in an iframe (to embed libraries doing forbidden stuff). My sandboxed page wants to make an xmlhttprequest to a relative URL (so still in the same extension), but it is refused with the following message:

XMLHttpRequest cannot load chrome-extension://nilibhiopchihkgnnecfblfjegmogpgn/libs/fonts/miss_fajardose/MissFajardose-Regular.ttf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

To tell the truth, I found the relevant documentations:

• http://developer.chrome.com/apps/manifest/sandbox.html

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

  But they make no sense to me, maybe it's the mix of colors and ADD.

A bit of context: I am using the same code inside my chrome web app and on the internet, in this instance I am loading a font, typesetting something and computing a toolpath for contouring the text. If the page is the chrome app there is a button to send it to the router, if it is on the web you can just see the toolpath.

解决方案

After about a half day of my life poking around, here's the best workaround I found. From sandboxed page, postmessage to parent asking for local file to be loaded:

window.top.postMessage({ XMLFile: "levels/foo.xml" }, "*");

In nonsandboxed page, initiate async load of file, then call back down to the sandboxed page with the string version of the file:

document.body.onload = function() {
    // Listen for request messages from child window
    window.addEventListener("message", function (event) {
        if (event.data.XMLFile) {
            // Load the requested XML file, must be async
            var xhttp = new XMLHttpRequest();

            xhttp.open("GET", event.data.XMLFile, true);
            xhttp.send(null);

            // After loading, pass the resulting XML back down to sandboxed page
            xhttp.onload = function (e) {
                document.getElementById("idSandbox").contentWindow.postMessage({ sResponseText: xhttp.responseText }, '*');
            }
        }
    } );
}

Returning to the sandboxed page, when you receive the xml response text, convert it back into a DOM object for parsing:

// Receive messages from containing window
window.addEventListener("message", function (event) {
    // XML file retrieved
    if (event.data.sResponseText) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(event.data.sResponseText, "text/xml");

        onAfterLoadLevel(xmlDoc);
    }
});

As an aside, the mix of colors on that whatwg page would trigger ADD in anybody that didn't already have it. The other reference pages were useless. There were a number of discussions about this issue but nobody has posted the code so I figured I'd do it here.

这篇关于本地xmlhttprequest从镀铬打包的应用程序中的沙盒页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！