Chrome扩展跨域请求

Question

我知道这里已经讨论了很多次，我已经阅读了大部分这些线程，但我似乎无法让我的脚本工作。

问题是我试图使用bitly api来缩短谷歌Chrome扩展中的网址。我在本地存储中保存用户登录和apiKey，在此之前我验证它们。

这样做的代码是：

$.ajax({
        url:"http://api.bit.ly/v3/validate",
        dataType:'jsonp',
        data:{
            login: login,
            apiKey: apiKey,
            x_login :"test",
            x_apiKey :"test"
        },
        success:function (jo, textStatus, jqXHR) {
            if (jo.status_code == 200) {
                setItem('dg_BitlyApiKey', apiKey);
                setItem('dg_BitlyLogin', login);
                alert('Saved');
            } else {
                alert('Incorrect login and/or apiKey!')
            }
        }
    });

我的权限设置为"permissions": ["tabs", "notifications", "http://*/*", "https://*/*"]，但我仍然继续：

Refused to load script from 'http://api.bit.ly/v3/validate?callback=jQuery17204477599645033479_1334062200771&login=&apiKey=&x_login=test&x_apiKey=test&_=1334062201506' because of Content-Security-Policy.

脚本本身在扩展之外工作，因此我认为问题不在脚本中，而是具有权限。

我在这做错了什么？

Answer 1

问题是您没有真正执行XHR请求，而是在不安全的HTTP资源上执行JSONP请求。请参阅问题How to load an external JavaScript inside an extension popup和相关的Chromium bug report。

是的，我们不再允许扩展中的不安全脚本。如果您通过HTTP加载脚本，则活动网络攻击者可以将脚本注入您的扩展，这是一个安全漏洞。

JSONP通过在页面中动态添加新脚本标记然后执行内容来运行。在您的情况下，脚本资源是通过HTTP（而不是HTTPS）获取的。如果您的扩展使用扩展清单的版本2，则其后台页面无法获取非HTTPS脚本。

解决方案：如果您使用HTTPS上的Bitly API，我相信这将解决您的问题。发送您的Ajax调用https://api-ssl.bitly.com/v3/validate（而不是您当前的http://api.bit.ly/v3/validate值）

Answer 2

您需要打包您的应用/扩展程序才能使跨域请求生效。托管应用程序将无法执行跨域请求。看到：

Cross-Origin XMLHttpRequest in chrome extensions

Answer 3

要在Chrome扩展程序中进行跨源请求，您需要避免在内容脚本中进行跨源请求。

你可以在https://stackoverflow.com/a/56929473/3680164找到完整的答案

或者在文档https://www.chromium.org/Home/chromium-security/extension-content-script-fetches中