28

Anyone knows if with jquery or general javascript, I can change the referrer from the header in an http ajax call?

basically I want it to be sent from my page but have a referrer from another page. Any information would be great.

fmsf
  • 36,317
  • 49
  • 147
  • 195
  • I think this might be helpful: http://stackoverflow.com/questions/220231/accessing-http-headers-in-javascript – mikeY Nov 22 '11 at 17:58
  • 1
    Normally, you can only send requests to your own domain. Why do you want to fool your own server changing the referer? – Cagatay Gurturk Nov 22 '11 at 23:33
  • Possible duplicate of [set referer url with ajax request](http://stackoverflow.com/questions/8798706/set-referer-url-with-ajax-request) – user2284570 Jul 02 '16 at 15:17

4 Answers4

61

The browser will overwrite the referrer always for the tests that I've done. Meaning you can't change the referrer of an ajax call.

fmsf
  • 36,317
  • 49
  • 147
  • 195
  • Can I at least be sure that if the browser doesn't send a referer, mine will be sent? – xpy May 28 '13 at 08:49
  • 2
    "Meaning you can't change the referrer of an ajax call" - well, except with fiddler or any other thing that comes between browser and server ;) – Teodor Sandu Oct 05 '16 at 13:45
  • 4
    but no one can stop a CURL request ;) – Kuldeep Dangi Jun 20 '17 at 08:01
  • @PetrPeller why? This represents a security issue by sending potentially sensitive URL params to third parties. – 111 Jul 08 '19 at 06:57
  • @glyph It is precisely for security reasons that the referrer header cannot be changed via JavaScript. Otherwise, it would be very easy to publish a website with e.g. cute cat pictures that sends AJAX requests to third party websites such as Twitter and post some tweet on your behalf, or buy some stuff from Amazon, etc. For that reason, the browser won't allow you to send AJAX requests to other servers, unless they explicitly accept it in their response headers. – Luis Crespo Feb 06 '21 at 11:24
  • 1
    @LuisCrespo you're talking about XSS. This is a different issue. It is very possible to do XSS with ajax requests in a controlled fashion. Also see below. It is possible to remove the referrer with ajax. https://stackoverflow.com/questions/6817595/remove-http-referer/32014225 – 111 Feb 06 '21 at 20:58
  • Ah, that's true, CORS restrictions are controlled by the browser itself, so there's no need to prevent header manipulation. – Luis Crespo Feb 07 '21 at 22:22
6

You can use .setRequestHeader( 'referer', 'foo' ), but I'm not sure if the browser would just replace that with the proper one or not.

via jQuery, the .ajax() method allows headers as well (.get() and .post() don't)

Note that there's very little point to doing this as you can't do cross-domain AJAX and even attempting to do this could possibly trigger XHR security rules in some browsers and just stop the request altogether.

  • Damn I wish this was possible - I am loading 'parts' into an overlay, for example clicking the edit link for an item will display an overlay with the edit form in it, whilst keeping the list of items in the background. I wanted to change the referrer to the 'part' URL, so I could pick it up in the next form (so you could click a link to load another page into the overlay, and the back link would show the previous form). Unfortunately I now have to find another way to do this. +1 for actually doing some tests on this. – ClarkeyBoy Feb 03 '13 at 23:05
  • Even if the browser is changed, this is actually the answer about how to. Obviolsy is good to know about the browser function, but that dont mean that cannot do that. I don't know on which scenario you can need to do that, but im glad to know. Thanks. – m3nda Feb 17 '15 at 18:07
3

You can't do that with jQuery, but you CAN do that with fetch

Not sure if it would work for cross domain requests (you will obviously need at least CORS permissions for that) but it definitely does work for same domain + different page like in this example

fetch("http://example.com",{"referrer":"http://example.com/inbox","body":"{\"format\":\"root\"}","method":"POST"});
dmitry.matora
  • 111
  • 1
  • 4
  • 1
    are you sure? the comment for "referrer" on fetch Request is A string whose value is a same-origin URL, "about:client", or the empty string, to set request's referrer. – f.khantsis May 03 '20 at 10:44
  • 1
    Yes, somehow you can use Fetch to modify `Referer` header even though it's in the list of Forbidden headers (https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name). Note that you need to use `referrer` (with double `r`) option, but not `referrer` in `headers` option of Fetch. – Linh Dam Feb 24 '21 at 11:14
3

You can always use this :

jQuery.ajaxSetup({
    'beforeSend': function(xhr) {xhr.setRequestHeader("header key", "header value")}
})

But ofcourse, the browser can have a different opinion about the referer header. This should be tested :)

Radoslav Georgiev
  • 1,366
  • 8
  • 15
  • 5
    Definitely rejected by Chrome [17.0.963.56]. If anyone wants to test a different browser abilities, I set up a couple jsFiddles: [one with `jQuery.ajaxSetup`](http://jsfiddle.net/patridge/h4Lvp/) and [one with an option on a single `jQuery.ajax` call](http://jsfiddle.net/patridge/amA3W/). – patridge Mar 06 '12 at 16:27