由于Content Security Policy指令,Extension拒绝加载脚本

时间:2014-09-16 11:29:15

标签: jquery google-chrome google-chrome-extension content-security-policy

以下是我的HTML代码

脚本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML:

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

以下是js

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

清单文件:

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

我发现当我在浏览器中运行此代码而不是正确显示警报时,但当我将其作为chrome扩展程序运行时,它会给我以下错误。

未捕获的ReferenceError:$未定义

拒绝加载脚本&#39; http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&#39;因为它违反了以下内容安全策略指令:&#34; script-src&#39; self&#39;铬扩展资源:&#34;

我不明白这些错误是什么。请帮我理解扩展..

谢谢

2 个答案:

答案 0 :(得分:57)

在Chrome扩展程序中,您的清单中的扩展名content security policy(CSP)必须明确允许外部脚本来源:

  

如果您需要一些外部JavaScript或对象资源,您可以通过将安全来源列入白名单来放宽策略,以便接受脚本......

     

允许通过HTTPS从example.com加载脚本资源的宽松策略定义可能如下所示:

"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"

脚本只能通过HTTPS加载到扩展中,因此您必须通过HTTPS加载jQuery CDN资源:

<script src="https://ajax.googleapis.com/..."></script>

并将修改后的CSP添加到清单中以允许该HTTPS资源:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

然而,对于您的特定情况,更好的解决方案是在本地扩展中包含jQuery,而不是从Internet加载(例如,您的扩展目前无法脱机工作)。只需在扩展文件夹中包含jQuery的副本,并在脚本标记中使用相对路径引用它。假设您的jQuery库和HTML弹出文件位于同一子目录中,只需执行:

<script src="jquery-x.y.z.min.js"></script>

答案 1 :(得分:-2)

<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {      
    var el = oldCreate.apply(this, arguments);
    if (elementName == "script") {           
        el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
    }
    return el;
}
</script>

<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>