chrome扩展加载外部js

Question

我正在构建一个 Chrome 扩展，它使用针对特定 Web 域定制的 JavaScript 库。这是对该库的限制，只能从该特定域调用（实际上是许可证问题）。

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

有人可以告诉我在 my 中应该有什么代码background.js以及content.js在 my 中添加什么权限吗manifest.json？

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

清单.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://*/*"
    ]
}

事件.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 加载代码），那么您必须求助于允许eval：

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

进而

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();

这应该是最后的手段，因为它打开了您的高特权环境，任何可以对您的连接进行中间人攻击的人都可以执行任意代码。

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

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

幸运的是，有一种方法可以至少部分减轻风险。

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

文档中甚至有完整的指南，“在 Chrome 扩展中安全地使用 eval”。

然后，您可以执行相同的操作，但在沙盒页面中（例如，<iframe>在您的事件/背景页面中），并使用postMessage. 这样，您可以验证通信，并且不为正在评估的代码提供对扩展 API 的任何直接访问。