How to manually set REFERER header in Javascript?

Question

I want to set Referer header of my webpage. Currently it displays "xyz" and I want to set it to "abc".

Viewed referer using javascript:alert(document.referer)

This has been asked before: http://stackoverflow.com/questions/220231/accessing-http-headers-in-javascript — Tieson T., Mar 06 '12 at 09:04
@TiesonT. Actually, that question is about accessing HTTP headers, not about overriding the `Referer` header. — Mathias Bynens, Mar 06 '12 at 09:07
@MathiasBynens Fair enough, but you can't change something you can't access, right? :) — Tieson T., Mar 06 '12 at 09:12
You can't, `document.referrer` is a read-only property, which value changes only when picking a link. If this picked link is on a security site, an empty string is assigned. — Teemu, Mar 06 '12 at 09:22
@T.J.Crowder Both reasons :) Forgetting to accept answers sometimes and sometimes I do not get acceptable answers — Abhinav Garg, Mar 06 '12 at 09:31

score 59 · Answer 1 · edited May 31 '15 at 21:09

59

You can use Object.defineProperty on the document object for the referrer property:

Object.defineProperty(document, "referrer", {get : function(){ return "my new referrer"; }});

Unfortunately this will not work on any version of safari <=5, Firefox < 4, Chrome < 5 and Internet Explorer < 9 as it doesn't allow defineProperty to be used on dom objects.

edited May 31 '15 at 21:09

Ryan Bemrose

9,018
1
41
54

answered May 02 '14 at 18:47

Jason Fertel

599
4
3

1

Works also. Prefer this to @casivaagustin's answer though his works also – Ema4rl Jan 27 '16 at 14:57
With this method I get an error in Safari 9: "TypeError: Attempting to change the getter of an unconfigurable property." – jthomas Jul 26 '16 at 15:20
1

If you want to change it in tests and want to redifine the referrer in multiple test cases, use ``` Object.defineProperty(document, 'referrer', { configurable: true, get: () => url, }); ``` – manohar Aug 18 '18 at 13:56
11

It sets the object property but isn't set in request headers – Christian Vincenzo Traina Dec 13 '18 at 14:44
Noob here. Would this line go inside ? Is it to be called within an event like onload or document.ready? – Sagar Jan 29 '21 at 04:51

score 37 · Accepted Answer · edited Aug 26 '15 at 19:25

37

You cannot set Referer header manually but you can use location.href to set the referer header to the link used in href but it will cause reloading of the page.

edited Aug 26 '15 at 19:25

Smi

13,850
9
56
64

answered Mar 07 '12 at 08:03

ABG

402
4
3

1

thanks it changes the referer but it changes the URL of selenium server So i consider that it is impossible to change the referer – Abhinav Garg Mar 07 '12 at 08:06
4

@ABG Any chance you can write a bit more about how your answer materializes in code? E.g. a short javascript snipping or HTML snippet? – qxotk Oct 18 '13 at 20:48
2

@jsmcfrind A bit late, but if you just do `window.location.reload()` this will cause the page to reload and if you check `document.referrer` it should be equal to the current page instead of whatever it may have been before. Tried creating a test case in jsfiddle but failed because of the sandbox nature of the website. [(Though I did create a somewhat amusing recursive jsfiddle in the process.)](http://jsfiddle.net/gjvLoarf/2/) – KhalilRavanna Dec 02 '14 at 17:29

score 25 · Answer 3 · edited May 27 '16 at 19:58

25

This works in Chrome, Firefox, doesn't work in Safari :(, haven't tested in other browsers

        delete window.document.referrer;
        window.document.__defineGetter__('referrer', function () {
            return "yoururl.com";
        });

Saw that here https://gist.github.com/papoms/3481673

Regards

test case: https://jsfiddle.net/bez3w4ko/ (so you can easily test several browsers) and here is a test with iframes https://jsfiddle.net/2vbfpjp1/1/

edited May 27 '16 at 19:58

gcb

13,901
7
67
92

answered Jul 10 '14 at 11:05

casivaagustin

558
5
7

but how about when a user tries to access a new site ??? for example there is a link on site1.com that redirect user on site2.com – ass-king some questions May 30 '16 at 14:14
doesn't add referral domain "yoururl.com" – Kamal Kumar Oct 26 '16 at 06:00
5

@Brandito It didn't work, the value has changed, but when you send a request such as image, you can find the referrer is still the old one. – chenkehxx May 08 '18 at 13:41
I can confirm it works in Safari 13. But I had to use `location.reload();` afterwards. – D. Jones Dec 01 '19 at 11:53

score 9 · Answer 4 · edited Jun 20 '20 at 09:12

I think that understanding why you can't change the referer header might help people reading this question.

From this page: https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

From that link:

A forbidden header name is the name of any HTTP header that cannot be modified programmatically...

Modifying such headers is forbidden because the user agent retains full control over them.

Forbidden header names ... are one of the following names:

...

Referer

...

Vaibs · Answer 5 · 2016-09-01T13:29:03.490

4

You can not change the REFERRER property. What you are asking is to spoof the request.

Just in case you want the referrer to be set like you have opened a url directly or for the fist time{http referrer=null} then reload the page

location.reload();

edited Sep 01 '16 at 13:29

answered May 15 '16 at 09:33

Vaibs

2,018
22
29

this only remove referrer header. doesn't add custom header – Kamal Kumar Oct 26 '16 at 06:01
Right. the question isnt about adding the custom header. – Vaibs Feb 22 '17 at 14:24

score 3 · Answer 6 · answered Oct 28 '17 at 22:53

3

If you want to change the referer (url) header that will be sent to the server when a user clicks an anchor or iframe is opened, you can do it without any hacks. Simply do history.replaceState, you will change the url as it will appear in the browser bar and also the referer that will be send to the server.

answered Oct 28 '17 at 22:53

Maciej Krawczyk

14,825
5
55
67

1

You can only replace the path or add-remove fragments, not the domain with `history.replaceState`. [developer.mozilla.org on history.replaceState](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method) – Cemal Mar 01 '18 at 12:52

score 2 · Answer 7 · answered Dec 14 '15 at 07:34

Above solution does not work for me , I have tried following and it is working in all browsers.

simply made a fake ajax call, it will make a entry into referer header.

var request;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    try {
        request = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            request = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e) {}
    }
}
request.open("GET", url, true);
request.send();

how i should try this ? can you please provide me steps for this as i used many ways to change referrar header but nothing works ? — Kamal Kumar, Oct 26 '16 at 06:01

score 0 · Answer 8 · answered Sep 06 '17 at 12:23

You can change the value of the referrer in the HTTP header using the Web Request API.

It requires a background js script for it's use. You can use the onBeforeSendHeaders as it modifies the header before the request is sent.

Your code will be something like this :

    chrome.webRequest.onBeforeSendHeaders.addEventListener(function(details){
    var newRef = "http://new-referer/path";
    var hasRef = false;
    for(var n in details.requestHeaders){
        hasRef = details.requestHeaders[n].name == "Referer";
        if(hasRef){
            details.requestHeaders[n].value = newRef;
         break;
        }
    }
    if(!hasRef){
        details.requestHeaders.push({name:"Referer",value:newRef});
    }
    return {requestHeaders:details.requestHeaders};
},
{
    urls:["http://target/*"]
},
[
    "requestHeaders",
    "blocking"
]);

urls : It acts as a request filter, and invokes the listener only for certain requests.

For more info: https://developer.chrome.com/extensions/webRequest

any chance of a better example? where am i suppose to paste this? — Toolkit, Nov 20 '17 at 15:39
You are supposed to create a background script and paste it in that file. Be sure to add the file as a background script in your manifest. — Nalin, Dec 21 '17 at 18:16
This answer is valid if you are writing a chrome extension. - If your clients / users accepts to install it - Or if you are doing something at home for your own use and ready to install your own extension. — Mustafa Düman, Jan 16 '20 at 20:21

score 0 · Answer 9 · answered Jan 04 '23 at 06:50

If you need to set it from google or any other website that links to your website and be sure, google or that website is the referrer value, you may follow these instructions:

Go to google.com
Type site:mywebsiteexample.com
After finding it, right click and inspect
On the top right of the screen, you may find a cursor to select what part of the DOM you want to select and inspect. Select the anchor. Modify the href value to the link you want. Then hit enter.

After clicking the anchor, it should redirect to your link or page and the referrer value should be in this case from google.com or the website you've decided

How to manually set REFERER header in Javascript?

9 Answers9

Linked

Related