CODEWITHSUNDEEP
javascriptajaxgoogle-chromegoogle-chrome-extension
nrofis
nrofis

Reputation: 9796

Sending AJAX from Chrome Extension

I want to create a Chrome Extension that can send AJAX calls with XMLHttpRequest. The website that I send the request to it not mine.

When the website gets AJAX call, it check the Referer header of the request. If I send the AJAX from my background-page (Chrome Extension) no Referer header sends, and the request denied.

How can I change the Referer header from the background-page?

Upvotes: 4

Views: 3112

Answers (2)

Mitja
Mitja

Reputation: 2011

As stated in Xan's answer, you need to use the webRequest API. Since I love minimal examples in answers, here is one:

manifest.json permissions need to contain:

"permissions": [
    "*://target.site/", 
    "webRequest",
    "webRequestBlocking"
]

The js code to modify requests to contain an arbitrary referer:

callback = function(details) {
    details.requestHeaders.push({
        name: 'Referer',
        value: 'http://your.arbitrary.referer'
    });
    return {
        requestHeaders: details.requestHeaders
    };
};

filter = { urls: ["*://target.site/target.html"] };
opts = ['blocking', 'requestHeaders']
chrome.webRequest.onBeforeSendHeaders.addListener(callback, filter, opts);

Whenever the browser makes a request to *://target.site/target.html now, the referer will be set to http://your.arbitrary.referer. This takes effect for requests done by the user (by clicking on links or being on a site that performs AJAX-requests) as well as AJAX-requests by your own extension.

Upvotes: 3

Xan
Xan

Reputation: 77591

You should be able to intercept your own request with webRequest API and modify request headers.

Specifically, listen to chrome.webRequest.onBeforeSendHeaders in a blocking manner, edit the headers object, and return it to override headers.

Not all headers can be modified in this way, but Referer can.

Upvotes: 3

Related Questions