chrome扩展加载外部js

Question

我正在构建一个chrome扩展，它使用针对特定Web域自定义的JavaScript库。仅限于该特定域调用该库的限制（实际上是许可证问题）。

我想将js库加载到我的chrome扩展程序中，但扩展程序会出现内容安全策略错误，因为要使用的库来自HTTP（而非HTTPS）URL。我搜索了StackOverflow，我看到的唯一选项是在本地加载该文件或通过消息传递。

有人可以告诉我应该在background.js和content.js中添加哪些代码以及在manifest.json中添加哪些权限？

获取该js库的网站是，例如http://library.com/js/xy.js。 我知道应该有一些像content.js中的一些代码。如何从该域加载代码？

的manifest.json：

{
    "manifest_version": 2,
    "name": "abc",
    "version": "0.2",
    "description": "abc",
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "browser_action": {
        "default_icon": "MM_logo_2009.png",
        "default_popup": "tab/popup.html"
    },
    "background": {
        "scripts": ["event.js"],
        "persistent": false
    },
    "permissions": [
        "http://library.com/js/xy.js",
        "bookmarks",
        "tabs",
        "storage",
        "http://*/*", 
        "https://*/*"
    ]
}

event.js：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://library.com/js/xy.js", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        // innerText does not let the attacker inject HTML elements.
        document.getElementById("resp").innerText = xhr.responseText;
    }
}
xhr.send();

Answer 1

一种非常直接且愚蠢的危险方式：

如果这是您实现此目的的唯一方法（通过HTTP加载代码），那么您必须诉诸allowing eval：

$("form").submit(function () {
  if ($(this).valid()) { // in case you have some validation
    $(this).find(":submit").prop('disabled', true);
    $("*").css("cursor", "wait"); // in case you want to show a waiting cursor after submit
  }
});

然后

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

这应该是最后的手段，因为它可以打开您的高权限环境，从任何可以MITM连接的人那里执行任意代码。

由于它是HTTP，因此无法保证发件人的身份或脚本的完整性。

如果此代码被Chrome网上应用店拒绝，请不要感到惊讶！

幸运的是，有一种方法可以至少部分地降低风险。

使用保护..错误，沙盒：

文档中甚至还有一整套指南"Using eval in Chrome Extensions. Safely."

然后执行相同操作，但在sandboxed页面中（例如，您的活动/背景页面中的var xhr = new XMLHttpRequest(); xhr.open("GET", "http://library.com/js/xy.js", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { eval(xhr.responseText); } } xhr.send(); ），并使用<iframe>与其进行通信。这样，您就可以验证通信，而不是为正在评估的代码提供对扩展API的任何直接访问。