Javascript Google Chrome扩展内容安全策略

我正在开发一个Google Chrome扩展，该扩展应该包括Facebook的sdk.js，但问题是由于内容安全策略，我无法使该应用正常工作。以下是我的部分代码：

manifest.json

{
  "manifest_version": 2,

  "name": "<app-name>",
  "description": "<description>",
  "version": "0.1",

  "permissions": [
  "tabs","<all_urls>"
  ],
  "content_scripts": [
  {
    "matches": [
    "http://*/*",
    "https://*/*"
    ],
    "js": ["intercept_connections.js"]
  }
  ],
  "content_security_policy": "script-src 'self' https://connect.facebook.net/en_US/ 'unsafe-eval'; object-src 'self'",
  "background": {
    "scripts" : ["background.js"]
    },
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    }
  }

---

我尝试更改

“内容安全策略”：“脚本src'self”https://connect.facebook.net/en_US/ “不安全评估”；“对象src'self'”

至

“内容安全策略”：“脚本src'self'；对象src'self'”

或“内容安全策略”：

“脚本src'self”https://connect.facebook.net/en_US/ “在线评估”；对象src“self”“

如错误中所示，但运气不佳..我应该尝试什么？

谷歌认为eval是一种不安全的、潜在危险的操作，因为动态内容可能会进入应用程序/扩展并自行运行，获得对全世界功能强大的chrome.*API的访问权，让人能够访问文件系统和其他资源，而这些资源通常是普通网站JavaScript所无法访问的

因此，在扩展和应用程序中使用这些违反CSP的库的唯一方法是：

我们通过将扩展包中的特定HTML文件列为沙盒来实现这一点。无论何时加载沙盒页面，它都将被移动到唯一的来源，并且将被拒绝访问chrome.*API。如果我们通过iframe将这个沙盒页面加载到扩展中，我们可以向它传递消息，让它以某种方式处理这些消息，然后等待它返回结果。这个简单的消息传递机制为我们提供了在扩展的工作流中安全地包含eval驱动的代码所需的一切

简言之，您需要在扩展名中创建一个额外的组件，一个HTML文件，用于沙箱存储，并加载有问题的Facebook代码。然后，您将在沙盒页面中添加侦听器，该侦听器可以接收来自包含HTML页面的消息，然后处理扩展中的事件。这可以保护您的用户免受eval攻击，因为eval代码无法访问沙箱中的任何chromeapi

当我使用sipml5的JavaScript SIP库时，我处理了相同的问题。该库大量使用eval，因此使用该库的唯一方法是在沙箱中。我创建了一个小型库，用于处理沙盒和主应用程序之间的同步存储数据，称为。在代码中，您可以看到我是如何在沙箱和主页之间通信的：

manifest.json:

"sandbox": {
    "pages": ["sandbox.html" ]
  },

<!-- Sandboxed page -->
    <iframe height="800" width="1200" id="sandboxFrame" class="sandbox active" src="sandbox.html" style=""></iframe>

mainpage.html:

"sandbox": {
    "pages": ["sandbox.html" ]
  },

<!-- Sandboxed page -->
    <iframe height="800" width="1200" id="sandboxFrame" class="sandbox active" src="sandbox.html" style=""></iframe>

下面是一个示例，我们将数据发送回主模块：

window.addEventListener('message', function(event) {
            console.info("Message received from wrapper = " + JSON.stringify(event.data));
            console.info("location = " + window.location.href);
            switch(event.data.command) {

                case 'initStorageAPI':
                    storageAPI.storage = event.data.storage;  result = "It's alive!!!";
                    storageAPI.sandbox.window.onload();
                    console.info("Prepare to postMessage back to the wrapper...");
                    storageAPI.wrapper = event;
                    event.source.postMessage({'command':'initStorageComplete','result': result}, event.origin);

storageAPI.setItem = function(key, value) {
        if(storageAPI.CHROME_EXTENSION == false) {
            return window.localStorage.setItem(key, value);
        } else {
            storageAPI.storage[key] = value;
            // send back to the wrapper to store
            storageAPI.wrapper.source.postMessage({'command':'writeStorage', 'storage': storageAPI.storage}, storageAPI.wrapper.origin);

        }

    };

总之，您可以使用类似的技术在沙箱和主模块之间来回整理数据，将不安全的库与扩展的安全敏感部分连接起来。有关更多详细信息，请参阅文档

请记住，iframe甚至可能被隐藏。您真正需要的只是能够运行不安全的代码

---

免责声明：我是Chrome的沙盒存储API™ 开发商我不属于谷歌或Chrome，所有商标都属于谷歌。

你能准确地看到是什么导致了这个错误吗？听起来Facebook可能在某处使用eval。Facebook api中有一次使用eval…看一看[…只要搜索eval，你就会发现它一次..但我使用的是“不安全的eval”，所以我不知道我的错误在哪里我很确定谷歌认为eval到处都不安全。我不认为你可以覆盖它。你要做的是对该内容使用iframe，这样它就不能访问任何Chrome API。然后你需要使用postMessage来合作在iframe和扩展的主要部分之间进行通信。该错误违反了

不安全内联

而不是

不安全内联

。是的。但是如果我双关不安全内联并删除不安全内联，我会得到一个关于违反CSP strict dynamic不适用于Chrome扩展的不安全内联想法的错误？

window.addEventListener('message', function(event) {
            console.info("Message received from wrapper = " + JSON.stringify(event.data));
            console.info("location = " + window.location.href);
            switch(event.data.command) {

                case 'initStorageAPI':
                    storageAPI.storage = event.data.storage;  result = "It's alive!!!";
                    storageAPI.sandbox.window.onload();
                    console.info("Prepare to postMessage back to the wrapper...");
                    storageAPI.wrapper = event;
                    event.source.postMessage({'command':'initStorageComplete','result': result}, event.origin);

storageAPI.setItem = function(key, value) {
        if(storageAPI.CHROME_EXTENSION == false) {
            return window.localStorage.setItem(key, value);
        } else {
            storageAPI.storage[key] = value;
            // send back to the wrapper to store
            storageAPI.wrapper.source.postMessage({'command':'writeStorage', 'storage': storageAPI.storage}, storageAPI.wrapper.origin);

        }

    };