The magic Firefox address bar decoder

By Paul Gobée, 2013

Click the links in Firefox, Chrome, Safari, Internet Explorer. What appears in the address-bar?

Characters encoded by encodeUriComponent and shown encoded by Firefox

Characters encoded by encodeUriComponent but shown decoded in the address bar by Firefox

Characters not encoded by encodeUriComponent, but shown decoded in the address bar by Firefox



How %5E%7B%7D%5B%5D%22%5C%3C%3E%60%7C changes magically in Firefox to ^{}[]"\<>`| . What the @#$%&=:/,;?

The query part of an URL (the part following the ? ) can be used to transmit information to a web-page, e.g. "www.mysite.org?language=en-GB" transfers the language-setting 'English' to the web page "www.mysite.org". The message you want to transmit might contain special characters, such as "@#$%&é". These need to be encoded in an URL, see here. If they are not encoded in the URL, they might not be transferred correctly. So to transfer such characters in the query: first encode them, transfer them in the URL, read them from the URL and finally decode them again.

On your web-page you want to receive these encoded characters correctly -hence encoded-. Here Firefox got me by surprise. I cut and pasted a URL with a query holding encoded characters in the address bar of Firefox, pressed enter to load the page,... and all of a sudden the encoded values in the URL's query were decoded in the address bar. This only happened on Firefox, not on IE or Safari. Chrome appeared to have only a very slight touch of magic, it's address bar auto-decodes:   < > ~ - _

This scared me. Assume that a user navigates to a web page with a URL holding such encoded characters. I assumed the first time the query would be read as it was sent, thus encoded. However, now Firefox had decoded these characters! If the user would next reload the page... gone were the encodings, hence I assumed the characters wouldn't be read correctly anymore at the reload.

Fortunately, Firefox only shows the characters decoded in the address bar, but behind the scenes, the encodings are still there. So if you get the query in your web-page, you will get the correctly encoded characters, ready to be handled further.

Before I came to this soothing conclusion, I had been trying out to see what happened to several special characters. There were three categories:

  1. Characters that are encoded by encodeURIComponent and are left unaffected by Firefox.
  2. Characters that are encoded by encodeURIComponent, but that magically change to their uncoded versions in Firefox's address bar.
  3. Characters that are not encoded by encodeURIComponent. However encodings are available. These encodings are also magically reversed in Firefox's address bar.
See it yourself with the links above. Open the links in Firefox. See what URL appears in the address bar. See what is read from the query in the section below. Try the same in Internet Explorer, Chrome or Safari. Notice the differences in what is shown in the address bar... Hope that this saves you the scare I had...


And here are two tables that show it all.

Characters encoded by encodeUriComponent
character @ # $ % ^ & { } [ ] = : / , ; ? + " \ < > ` |
encoded %40 %23 %24 %25 %5E %26 %7B %7D %5B %5D %3D %3A %2F %2C %3B %3F %2B %22 %5C %3C %3E %60 %7C
in Firefox address bar after page load %40 %23 %24 %25 ^ %26 { } [ ] %3D %3A %2F %2C %3B %3F %2B " \ < > ` |
Characters not encoded by encodeUriComponent, but manually encoded
character ~ ! * ( ) ' - . _
encoded %7E %21 %2A %28 %29 %27 %2D %2E %5F
in Firefox address bar after page load ~ ! * ( ) ' - . _