How can I remove the CORB warning?

Question

Chrome was working until version 73. Now it is throwing me a CORB warning and stopping my chrome extension from running.

Here is my ajax jquery code, nothing special

  $.ajax({
    url: this.url + "api/users",
    type: 'get',
    data: { account_id: this.account_id(), user_id: this.user_id(), person_id: person_id },
    success: function (data) {
      //do stuff
    }
});

I did notice that if I remove the x-content-type-options header so that it no longer reads "nosniff" I can get some Ajax requests to be returned but not others. Not sure if this means anything but I noticed that the json requests that returned an array worked but others did not.

remove_keys = %w(X-Content-Type-Options)
response.headers.delete_if{|key| remove_keys.include? key}

[{'id' : '123'}] <-worked
{'id' : '123'} <- did not work (not sure if means anything)

Full error from chrome

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://ideas.test/api/users?token=W9BDdoiKcXLWSHXWySnwdCV69jz2y&account_id=3098355&user_id=john%40gmail.com&person_id=21046915&sync=false&new=true with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Headers from response

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-auth_token
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD
Access-Control-Allow-Origin: chrome-extension://mhikhjencpecbhelhjgdcgpdhlhdlhjh
Access-Control-Expose-Headers: 
Access-Control-Max-Age: 1728000

Request Headers

Provisional headers are shown
Accept: */*
Origin: chrome-extension://mhikhjencpecbhelhjgdcgpdhlhdlhjh
Referer: https://3.basecamp.com/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36

How can I get the response body to be returned without chrome removing the body due to CORB?

Answer 1

I found a workaround. Might be an overkill for someone, but it took me 15 mins to fix everythiung. In your content script wrap all your ajax calls into a function:

Add ajaxGet function to your content script:

function ajaxGet(data){
    return new Promise(function (resolve, reject) {
        chrome.runtime.sendMessage({action: 'ajaxGet', data: data}, function (response) {
            console.log(response)
            if(response&&!response.statusText){//Might need some work here
                resolve(response);
            } else {
                reject(response)
            }
        });
    });
}

And in your background.js add a listener:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   if(request.action=="ajaxGet"){
       $.ajax(request.data).then(sendResponse,sendResponse)
       return true //telling chrome to wait till your ajax call resolves
   }
})

in stead of

$.ajax({
    url: this.url + "api/user_boards",
    type: 'get',
    data: { account_id: this.account_id()}
}) 

call

ajaxGet({
    url: this.url + "api/user_boards",
    type: 'get',
    data: { account_id: this.account_id()}
}).then(onSuccess, onError) //handle response from here

If you don't want to use jquery in your background.js you can make Xhr call in stead. Something like this:

var data = JSON.stringify(false);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
    sendResponse(this.responseText)
  } else {
    //handle errors
  }
});

xhr.open("GET", request.data.url);

xhr.send(data);

You'll have to work around headers on your own.

Answer 2

It looks like you're putting the CORS headers in the request. You need to put them in the response instead.

Answer 3

Chrome 73 inject some new security. Just try to move your xHTTP requests to your background script with chrome.runtime.sendMessage and get response with SendResponse callback.

In content or popup script replace ajax with :

chrome.runtime.sendMessage(
  { action: "check", data: {/* params for url */}}, 
  // callback with url response
  function(response) {
    if( response.success ) {
      var myDataFromUrl = response.data;
      ...
    } else {
      console.log('Error with `check`,', response.data);
    }
  }
);

From background script:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    var url = 'https://mysyte.com/';
    if(request.action === 'check' ) {
      url = url + 'check'
      ajax( url, request.data, 
        success: function( d ) {
          sendResponse({success: true, data: d});
        },
        error : function( d ) {
          sendResponse({success: false, data: d});
        }
      );
    }
});

function ajax( url, params, cbSuccess, cbError ) { ... }

Answer 4

After fixing the CSP & CORS issues, I was still getting the warning on the OPTIONS method call (which is done for cross-domain calls).

I fixed it on the server by setting the content-type for the OPTIONS method call (which doesn't return any data) to "application/octet-stream". No more warnings!