How to modify referer header in Chrome

When you access a website or make a request to a web server using your browser, it sends various HTTP headers as part of the request. One of these headers is the “Referer” header, which tells the server the URL of the page that referred you to the current page.

While this header serves a legitimate purpose, there are times when you might want to modify or suppress it for privacy or testing reasons. In this article, I will talk about my experience in how to change the Referer header in a request sent in the Chrome browser.

Disclaimer: Modifying the Referer header can have privacy and security implications, and it may violate the terms of service of some websites. Ensure you are aware of the legal and ethical considerations when using this technique, and use it responsibly.

My task was to build a private application for a specific user, and part of this application’s functionality involves loading data from another websites into their own when clicking a buttom in their admin page.

Since the web application I’m building is a private one, the simplest way I can do to read data from other websites is to disable CORS web security feature in chrome browser and send fetch requests to other domains. By doing this, I won’t get any CORS complaints when I read data from other websites.

One of the website from which I need to fetch data has a strict security measure in place: they only process requests sent from their own domain; if a request was send from another domain, they will return an error message indicating that the referer header mismatches with their domain name.

The biggest challenge in my task was to find a simple way to override the referer header sent in the request. I should mention here that there are other solutions that I can do to read the data from their website like building an external service outside the browser environment that fetches the data for me or like building a chrome extension the overrides the referer header, however I was looking for the simplest way to access the other website data without the need to buind an external service or app to do that.

Modern web browsers, including Chrome, do not allow you to directly modify the Referer header for security and privacy reasons. The Referer header is automatically generated by the browser based on the URL of the page that initiated the request, and it cannot be overridden via JavaScript when making requests using the Fetch API or even XMLHttpRequest.

The Referer header is an important security feature that helps websites protect against Cross-Site Request Forgery (CSRF) attacks and prevents unauthorized access to certain resources. Allowing web pages to modify the Referer header could introduce significant security vulnerabilities.

But there’s one way you can use to modify the auto generated referer header in chrome, which is by modifying the browser history. The trick is very simple. When sending a request to another domain, the browser sets the value of the Referer header to the current page url set in the browser’s address bar. So what we need to do is changing the url in the address bar without reloading the page content, and we can do that using the JS History API.

I used window.history.replaceState to change the Referer header indirectly by changing the URL in the browser’s address bar. Here’s how I did it:

// This sample code shows how to modify referer header to `example.com` while I'm in `mywebsite.com`
const readData = async() => {
    const pageToReadDataFrom = 'https://example.com/page-to-read-data-from';
    
    // Store the current location to come back to it later
    const originalLocation = window.location.href;

    // Replace address bar url domain name
    window.history.replaceState(null, '', 'https://example.com/');

    // Read data from example.com website, the referer header will be sit to `example.com`
    let result = await fetch(pageToReadDataFrom).then(res => res.json()).then(res => {/*Do whatever I want with the result here*/});

    // Restore original url in the address bar.
    window.history.replaceState(null, '', originalLocation);
}

Please note that this can be only done while cors protection is disabled in your chrome browser(by running chrome with the --disable-web-security flag). If you did not do that, you will get a CORS error similar to this one:

Uncaught DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://example.com/' cannot be created in a document with origin 'https://mywebsite.com' and URL 'http://mywebsite.com/wp-admin/'.

In the world of web development, innovative solutions often arise from the need to overcome unique challenges. Modifying the Referer header in Chrome, as explored in this article, was a very exciting challenge to solve. Leveraging the JavaScript History API with window.history.replaceState offers a workaround to adjust the Referer header indirectly, proving invaluable in certain cross-domain data loading scenarios.