6

I'm making a chrome extension and I need to make a cross-domain POST request to another domain. Code runs in Chrome Content Script environment which has some limitations.

I inject my code in a specific site with domain looks like service.site.com and I have to make a request to the domain like api.site.com

The response headers from api.site.com looks like

access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type, X-Requested-With, Accept
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
access-control-allow-origin: https://service.site.com

As you see that another domain allows requests from service.site.com. It means an Origin header of my request headers should contain that Origin.

But chrome extension adds an Origin header for me!

Now it sends a request to api.site.com with a header

Origin: chrome-extension://oeminagccdkclchnelmkbkcpcfnjgofj

and api.site.com may block it? I do not receive anything in a response. A request crashes and I see no error and no data in response.

Of course I added permissions in manifest file:

"permissions": [
  "*://service.site.com/*",
  "*://api.site.com/*"
],

And it still doesn't work. Chrome extension continues change Origin header and server doesn't respond. OR does it respond but my browser blocks it? I can't find out. If I run that request in WEB-script environment, it works well and I see a response from server. But I still have to run it in a Content-script environment.

I even tried to inject a function with post request in a web-script environment and call it from content-script environment but if I do it such way, it adds that Origin header and it doesn't work.

I also tried to change Response headers using Chrome extension features hoping that would help

const responseListener = function(details){
  const out = [];
  details.responseHeaders.forEach(item => {
    if (item.name.toLowerCase() !== 'access-control-allow-origin') {
      out.push(item);
    }
  });
  out.push({name: 'access-control-allow-origin', value: '*'});
  return {responseHeaders: out};
};

chrome.webRequest.onHeadersReceived.addListener(responseListener, {urls: ["*://*/*"]},
  ["blocking", "responseHeaders"]);

Now it shows that api.site.com returns my header but it still doesn't help.

  • 2
    Make the request in your background script and send the results back via messaging as shown in the [official explainer](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches) (section 2). – wOxxOm May 24 '19 at 10:18

0 Answers0