jQuery.ajax() blocked due to CSP within WebExtension

Question

I'm developing a Mozilla Firefox extension, which needs to communicate with my server on localhost:8080.

jQuery.ajax({
        type: query_method,
        url: "http://localhost:8080/item",
        data: item,
        dataType: "jsonp",
        success: function(result) {
            return result.code;
        },
        error: function(request, status) {
            /*
             todo handle internal error
             */
            console.log(request);
            console.log(status);
        }
    });

Thanks to the CSP, I cannot use jQuery.ajax() to GET/POST/DELETE/PUT. It all gives me the following error message:

Content Security Policy: 
The page's settings blocked the loading of a resource at
http://localhost:8080/... 
("script-src moz-extension://a79d13c4-898a-482a-9bc9-d016e8dae8f5
https://* moz-extension: blob: filesystem: 'unsafe-eval' 'unsafe-inline'").

And of course, I've tried some so-called solutions like:

• "content_security_policy": "script-src 'self'; object-src 'self'; report-uri http://localhost:8080" -> no use
• "content_security_policy": "script-src 'self'; object-src 'self' http:" -> Error processing content_security_policy: SyntaxError: ‘object-src’ directive contains a forbidden http: protocol source

Could anybody give a real solution to send HTTP request and receive data from a Firefox extension?

Why is using jQuery.ajax()` loading a resource? If so, I cannot use HTTP protocol to do any request.

Answer 1

The problem is not that an XHR is blocked by CSP, it is that you're using jquery and jsonp. Webextensions can perform cross-origin XHRs if you allow them in the manifest, but jsonp attempts to evaluate the resource as a <script> tag instead of actually performing an XHR.

Ditch jquery, allow localhost in the manifest and use standardized APIs such as XHR or fetch()