Javascript – how to fix ‘Chrome Content Security Policy Directive’ in chrome extension

ajaxgoogle-chromegoogle-chrome-extensionjavascriptjquery

I'm making a chrome extension that hits Wikipedia's API through an ajax call using JQuery. I have included a copy of JQuery in my extension's local js folder. in the popup I have an input and I take that value and do a get request in the popup.js and I get a "Refused to load the script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."

I have WebRequest and <all_urls> set in the permissions in manifest.json file. This is what my permissions look like in the manifest: 

"permissions": [
    "tabs",
    "webNavigation",
    "webRequest",
    "<all_urls>",
    "https://en.wikipedia.org/*"
  ],

I saw that adding a "content_security_policy": "script-src-elem 'self' https://www.wikipedia.org/" would make it easier on it but that didn't solve the problem. 

$('#urlCopyButton').click(function search() {
    var searchWord = document.querySelector('#searchWord').value;
    console.log(searchWord);
    var results = [];


$.ajax({
          crossDomain: true,
          header: 'Access-Control-Allow-Origin',
          url:`https://en.wikipedia.org/w/api.php?action=opensearch&format=json&maxlag=5&search=${searchWord}&callback=?`,
          type: 'GET',
          dataType: 'json',
          beforeSend: function(xhr){xhr.setRequestHeader('https://en.wikipedia.org', 'https://en.wikipedia.org');},
          success: (data) => {
              $("#output").html("");
            var i =0;
            for (var i = 0; i < data[1].length; i++) {
              $("#output").append(`<li><a href= "${data[3][i]  } ">${data[1][i] + " " + data[2][i]}<a></li>`);
            }
            console.log(data);
          },
          error: (err) =>{
            console.log(err.responseJSON);
          }


      })

})

I expect it to be a success and the data to so up in the console but it doesn't it throws this error:

Refused to load the script 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&maxlag=5&search=dfa&callback=jQuery33108394586597996985_1549655186216&_=1549655186217' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

send @ jquery.js:2"

Best Answer

Wikipedia's callback=? parameter is an ancient hack to load dataType: 'json' as a script, which is forbidden by default CSP in extensions. While many existing answers suggest relaxing the default extension CSP, it's obviously a bad solution that opens the extension to various remote attacks (like MitM).

Simply remove &callback=? parameter so that wikipedia returns a valid JSON by default.

No need for CORS-related tweaks like headers or crossDomain: true, no need to modify CSP.

$.ajax({
  url: 'https://en.wikipedia.org/w/api.php?' +
       'action=opensearch&format=json&maxlag=5&search=' + encodeURIComponent(searchWord),
  success(data) {
    // ...............
    // data is an object/array, you can process it directly here
    // ...............
  },
});

manifest.json should allow the URL:

  • "permissions": ["https://*.wikipedia.org/"]
  • "permissions": ["<all_urls>"]
Related Topic