Chrome打包的应用无法与jquery和jquery mobile一起使用

本文介绍了Chrome打包的应用无法与jquery和jquery mobile一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用jQuery 1.10.2和jQuery Mobile 1.3.2，我正在尝试使用以下简单的html创建chrome打包的应用程序...

<!DOCTYPE html>
<html>
<body>
    <div data-role="page">
        <script async src="events.js" type="text/javascript"></script>
    </div>
</body>
</html>

有两个问题.首先是jQuery将截获脚本标签加载events.js，并调用xhr.open(s.type，s.url，s.async);但是s.async是错误的. Chrome打包的应用程序不允许同步加载.因此，在jQuery的这一行之前，我设置了s.async = true;

下一个问题是，在首次插入文档时，jquery将在每个脚本上调用其globalEval方法，并且此调用eval会在chrome打包的应用程序中产生此CSP错误:

未捕获的EvalError:拒绝将字符串评估为JavaScript，因为在以下内容安全策略指令中不允许使用'unsafe-eval'脚本源:"default-src'self'chrome-extension-resource:". /p>

一个解决方案可能是沙盒化(在清单中添加html页面)，但这会导致另一个问题:XMLHttpRequest无法加载chrome-extension://ocnbknafegfhcgbiciegbfndjckamkoj/events.html. Access-Control-Allow-Origin不允许使用Origin null.该服务器具有"Access-Control-Allow-Origin"，"*"，因此我不希望出现此错误.

那么，第一个同步错误是jquery问题吗?第二个问题也是jquery/chrome打包的应用程序不匹配吗?CSP是否有解决方法?有一种方法可以沙箱但可以在页面之间导航吗?

解决方案

如前所述，由于内容安全策略(CSP)，您不能在Chrome打包的应用中使用globalEval.您也不能在行脚本标签中使用CSP视图，因为这也存在安全风险.

您可以对非CSP投诉HTML和JS进行沙盒处理，但是，为了发出XHR请求，您需要在Windows之间使用消息传递服务来摆脱Origin错误.

看看以下网址，其中包含有关如何处理跨域请求的文档: http://developer.chrome.com/apps/app_external.html#cross-origin

Using jQuery 1.10.2 and jQuery Mobile 1.3.2 I am trying to create a chrome packaged app with the following simple html...

<!DOCTYPE html>
<html>
<body>
    <div data-role="page">
        <script async src="events.js" type="text/javascript"></script>
    </div>
</body>
</html>

There are two problems. The first is that jQuery will intercept the script tag loading events.js and makes the call xhr.open( s.type, s.url, s.async ); however s.async is false. Chrome packaged apps do not allow synchronous loading. So before this line in jQuery i set s.async = true;

The next problem is that jquery will call its globalEval method on each script on first document insertion and this calls eval which produces this CSP error with the chrome packaged app:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:".

One solution might be sandboxing (add the html page in the manifest) however this causes another problem:XMLHttpRequest cannot load chrome-extension://ocnbknafegfhcgbiciegbfndjckamkoj/events.html. Origin null is not allowed by Access-Control-Allow-Origin.The server has "Access-Control-Allow-Origin", "*" so i wouldn't expect this error.

So, is the first sync error a jquery problem?Is the second problem also jquery/chrome packaged app mismatch?Is there are workaround for CSP?Is there a way to sandbox but allow navigation between pages?

解决方案

As you mentioned, you can't use globalEval in Chrome packaged apps because of the Content Security Policy (CSP). You also can't use in line script tags as the CSP views that as a security risk as well.

You are on the right track with sandboxing your non-CSP complaint HTML and JS, but in order to make the XHR requests, you need to use the messaging service between windows to get rid of the Origin error.

Take a look at the following url wich has documentation on how to handle cross-origin requests: http://developer.chrome.com/apps/app_external.html#cross-origin

这篇关于Chrome打包的应用无法与jquery和jquery mobile一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！