Thursday, August 10, 2017

Not encoded for chrome browser?

URL not encoded?


The other day, I tried to encode a URL by javascript functions: encodeURI and encodeURIcomponent.
What I did was encoding like this:
//Encode the URL. "Rhône" in the URL should be encoded.
$link = encodeURI("https://en.wikipedia.org/wiki/Rhône_(department)");
//Then jump to the URL.
location.href = $link;

But the result was like this:
Seems like not encoded at all???

So I tried other link also. The query should be encoded.
link = "https://www.google.com/search";
//Encode the query. "ÀàÇç???&&&" should be encoded.
query = "?q=" + encodeURIComponent("ÀàÇç???&&&");
//Then jump to the URL.
location.href = link+query;

The result was:

???&&&  was encoded but ÀàÇç was not encoded. Why is that?

This is because Chrome and Firefox use Unicode, which is a kind of UTF8, in its source code, so the URL is automatically changed to UTF8. This behavior is as per the spec. Also, this means you can use UTF8 letters in Chrome's and Firefox's URL, so even if ÀàÇç  is not encoded for Chrome, it is not a problem.

If you really want to make the UTF8 letters encoded also, encode the URL twice. (Actually I think it is pointless to force encoding such letters also though...)
link = "https://www.google.com/search";
query = "?q=" + encodeURIComponent(encodeURIComponent("ÀàÇç???&&&"));
location.href = link+query;

It's encoded now:

If you decode the query after receiving it, you can get the original query. Maybe use PHP or something to receive and decode the query.

I tried to decode the query by javascript as a test.
query = "%C3%80%C3%A0%C3%87%C3%A7%3F%3F%3F%26%26%26";
console.log(decodeURIComponent(query));

Console log:


Chrome developer tool too?


I used "htmlspecialchars" function in PHP the other day.
<?php
echo htmlspecialchars("#$?&%'");
?>

I expected the symbols to be escaped and I checked them by Chrome's developer tool. But the result was:
Why aren't they escaped???

This is because Chrome's developer tool displays actual letters (DOM tree, not code as it is), so the escaped characters are also displayed after being changed to readable letters. If you check the letters with IDE like visual studio code, you can see that it is actually escaped.

Related Google group's link: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/tb-8fbgNkCU