Firefox automatically decoding encoded parameter in url, does not happen in IE

Question

I am having frustration between Firefox and IE, well mostly Firefox as it is automatically decoding a parameter in the hash before I can work with it in Javascript. IE does not automatically decode the url thus not giving me reading errors.

My problem is similar to this one except I am not using ASP.NET ASP.NET MVC automatically decoding JSON-encoded parameters from AJAX

So if I take a url like example.com/#question=!%40%23%24%25^%26*(

whereas the "!%40%23%24%25^%26*(" was encoded using encodeURIComponent, in IE when I access the hash it will be left as "!%40%23%24%25^%26*(", however in firefox, when I access the hash it is automatically decoded into "!@#$%^&*("

The problem with this is that in my script I am using decodeURIComponent to decode the encoded value, which is fine if the string is indeed encoded. Since it is already decoded in Firefox, it gives me a malformed URI sequence error, and IE does not give me any errors at all.

How can I fix this?

Scrutator

Answer 1

After searching I found out that this is a cross browser problem, and it is better to use location.href.split("#")[1] instead of window.location.hash

Scrutator

Thanks very much for this. I've just run into the same problem in Fx (Chrome is fine) and location.href.split("#!")[1] worked for me too. – Donelu

Doesn't seem like Firefox is going to fix this anytime soon either. They've been discussing the bug since 2002 :( bugzilla.mozilla.org/show_bug.cgi?id=135309 and bugzilla.mozilla.org/show_bug.cgi?id=483304 – Theomachy

Firefox is allowing "#" inside the hash string, so it may be more bulletproof to so window.location.hash.split("#").splice(1).join("#"). – Despatch

Answer 2

This is actually what you want to use:

decodeURI(window.location.hash.substr(1))

Indeed window.location.href.split("#!")[1] does not get decoded by FF automatically (at least today).

Woodring

window.location.hash is actually the root of the problem, so this won't work. But it's how it should've been... – Theomachy

Answer 3

This is a really old question, but the underlying problem is still not solved. Firefox encodes something that other browsers don't.

Out of frustration, I had to create an entirely different approach and actually make the algorithm independent of whether the string was encoded or not.

I hope this solution finds those who need it:

function encodeOnce(text) {
  var doubleEncoded = encodeURIComponent(text);
  // only dive into it if there are any encoded strings...
  if (doubleEncoded.indexOf('%') != -1) {
    // reverse replace all % signs
    doubleEncoded = doubleEncoded.replace(/%25/g, '%');
    // if this is not equal to the original string, ...
    if (doubleEncoded != text) {
      // ... that means there was something to encode
      text = doubleEncoded;
    }
  }
  return text;
}

So then you can do this:

solution = encodeOnce(window.location.hash.slice(1));

What do you think?

Delaine

Answer 4

The answer above works except for cases where your url contains more than one #. This should handle all cases:

var hash = "";
var indexOfHash = location.href.indexOf("#");
if (indexOfHash > -1) {
    hash = location.href.substring(indexOfHash);
}

Also, it seems like this should be fixed in Firefox soon. Just hit the nightlies:

https://bugzilla.mozilla.org/show_bug.cgi?id=378962

Blevins

Answer 5

I had this problem. I solved it with this solution:

var currentLocation = document.location.hash;
var decodedLocation = decodeURI(currentLocation);

Ineffaceable