JavaScript window.location does not set referer in the request header
Solution 1:
Your post title shows that you want to change the current page programmatically using JavaScript but still having the HTTP referrer provided (from what I understood, using a <a>
tag is just for a test case).
You need to be aware of cross-browser issues:
- The HTTP referrer header (HTTP-Referer) is set when changing
window.location.href
under the following browsers:- MSIE 9 (but probably any version above 9)
- Firefox (at least 3.0, 3.5, 4.0, 5.0, but most probably all versions)
- Chrome (at least 9, but most probably all versions)
- Safari (at least 5, but most probably all versions)
- Opera (at least 11, but most probably all versions)
-
MSIE (at least 6, 7, 8): the referrer is not set when changing
window.location.href
(this is why some pseudo-solutions are based onmyLink.click()
) -
Firefox (at least 3.0, 3.5, 4.0): the
click
function does not exist (this is why pseudo-solutions based onmyLink.click()
do not work) -
Firefox 5 : the
click
function exists under Firefox 5 but does not change the window location, so all the methods relying on the existence of themyLink.click()
method will not work. CallingmyLink.onclick()
ormyLink.onClick()
raise an error ("onclick is not a function"), so solutions based on these calls will not work.
In order to manage these cross-browser issues, I'm using the following method:
function navigateToUrl(url) {
var f = document.createElement("FORM");
f.action = url;
var indexQM = url.indexOf("?");
if (indexQM>=0) {
// the URL has parameters => convert them to hidden form inputs
var params = url.substring(indexQM+1).split("&");
for (var i=0; i<params.length; i++) {
var keyValuePair = params[i].split("=");
var input = document.createElement("INPUT");
input.type="hidden";
input.name = keyValuePair[0];
input.value = keyValuePair[1];
f.appendChild(input);
}
}
document.body.appendChild(f);
f.submit();
}
navigateToUrl("http://foo.com/bar");
This solution works on all the browser flavors and version listed above. It has the advantage to be simple, multi-browser and easy to understand. Note that this has not been tested under HTTPS.
Solution 2:
Setting window.location
is not the same as following a link on that page. It starts a new request for the page as thought the user typed the URL into the browser's address bar.
I did manage to locate a workaround:
function goTo(url)
{
var a = document.createElement("a");
if(!a.click) //for IE
{
window.location = url;
return;
}
a.setAttribute("href", url);
a.style.display = "none";
document.body.appendChild(a);
a.click();
}
It creates a link on the page and simulates a click. The result is a change in window.location
and the referrer is populated.
http://ianso.blogspot.com/2006/01/referer-header-not-set-on-http.html
Solution 3:
I don't have enough points to comment on Evan's answer to suggest a correction so all I can do is post the correction here. In short, document.createElement(a)
is missing quotes and should be document.createElement("a")
instead. This should fix Kevin's concern about FF5 as well.
The whole function as I wrote it:
function goTo(url)
{
var a = document.createElement("a");
if (a.click)
{
// HTML5 browsers and IE support click() on <a>, early FF does not.
a.setAttribute("href", url);
a.style.display = "none";
document.body.appendChild(a);
a.click();
} else {
// Early FF can, however, use this usual method
// where IE cannot with secure links.
window.location = url;
}
}
This works in our HTTPS environment with IE7, IE8, FF3, FF7, and Chrome. So I imagine it works in FF5 as well. Without this workaround we get 403 errors in IE7 and IE8 when trying to set window.location. Regarding Sha Le's question as to why IE does this, I can only guess is that they believe it to be too insecure. I had a similar problem with window.open in IE that I had to work around as well.