Chrome extension Cross Domain Request

Question

I know that this has been talked about many times here, and I have read most of these threads but I can't seem to get my script working.

Problem is that I am trying to use bitly api to shorten urls in google chrome extension. I am saving users login and apiKey in localstorage and before I do so I validate them.

The code to do so is:

$.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!')
            }
        }
    });

I do have my permissions set to "permissions": ["tabs", "notifications", "http://*/*", "https://*/*"] but I still keep getting:

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.

The script itself works outside the extension so I assume the problem isn't within the script but with the permissions.

What am I doing wrong here?

On top of that as of 2019 you must make cross origin requests from the background page. See: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches — DrN, Apr 14 '19 at 18:45

score 6 · Accepted Answer · edited May 23 '17 at 12:34

The problem is that you aren't really doing a XHR request, you're doing a JSONP request on an insecure HTTP resource. See the question How to load an external JavaScript inside an extension popup and the related Chromium bug report.

Yeah, we're no longer allowing insecure scripts in extensions. If you load a script over HTTP, an active network attacker can inject script into your extension, which is a security vulnerability.

JSONP operates by dynamically adding a new script tag into your page and then executing the contents. In your case, the script resource is fetched over HTTP (instead of HTTPS). If your extension uses version 2 of the extension manifest, its background pages cannot fetch non-HTTPS scripts.

Solution: If you use the Bitly API over HTTPS, I believe that will fix your issue. Send your Ajax call to https://api-ssl.bitly.com/v3/validate (instead of your current value of http://api.bit.ly/v3/validate)

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

You need to package your app/extension for cross domain requests to work. A hosted application will not be able to do cross domain requests. See:

Cross-Origin XMLHttpRequest in chrome extensions

edited May 23 '17 at 10:30

Community

1
1

answered Apr 10 '12 at 13:04

Marius Kjeldahl

6,830
3
33
37

unfortunately it didn't help. Could there be other mistakes? – ShintoTuna Apr 10 '12 at 15:37
There must be some other mistake. Try making a minimal example which simply loads a regular html page from another site, get rid of the jsonp datatype and verify that a simple cross domain call to get some simple html works. – Marius Kjeldahl Apr 10 '12 at 16:58

score 0 · Answer 3 · answered Jul 08 '19 at 06:38

To make Cross-Origin Requests in Chrome Extension you need to Avoid Cross-Origin Fetches in Content Scripts.

Full answer you can found in https://stackoverflow.com/a/56929473/3680164

Or in the documentation https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

Chrome extension Cross Domain Request

3 Answers3

Linked