Encoding a Web Page In the URL

I recently learned about itty.bitty.site, a website that makes it possible to encode a web page in a URL. Yes, you read that correctly, the page is embedded in the URL.

The “about” page for itty bitty is itself a webpage encoded in a URL. It is:

https://itty.bitty.site/#About/XQAAAAI9BwAAAAAAAAAeHMqHyTY4PyKmqfkwr6ooCXSIMxPQ7ojYR153HqZD3W+keVdvwyoyd+luwncAksvskG/my97qDaUEyfDGB0QDbdURMwS0L90o5EpQ7O+BMmWrcB7fs71TJEJv1I/T/JfksoiYu9CqkeO/3MjEVGWv6XhfDjWJZ9laLARogtAZtwl7FltrwO/ppSfgeKOjxCxTNdUQH9WBM3de22qOzClzeZaSsSM+/ETbHBIHe1Qc+UF7PDfY470lZNjQg3wfOam9KudUiHOOQD3Kn8FLfaae0lmdK4VHRgxpDtL1nExkdF+pzNQAIyktIv3dQUPDKhGJ61c+WBTNP6NI5AvZ0uFT+Mc2oG0mMUwwuupCrjTxxpYv3l4L3W5lBXqWDjEH+cL8VZc6xz4WwIMG5J9jaQTv1SSxJ1dLg2Z2F7iNQ0fCFI74yeqBM1koHGbscBj4GpwWuA7y/fMCu3sEzcwefjBOuUwDdDfsdxqQLnjywtBxR5qHmngo/agjHyILkZxU8IiTgJeSbjcEOWdiVxcb9tEdtZ7eDwWQcwMsQdU9A9sCnargxl1IdVsbB9dfcFTQL8OpvjdqnmFZZJ6n2cKr51FonrcrMjm68aS4Lemk+D4sRaHnN+O5BrF10BiSfjumSkvhZ0Uwu/tR35LSmtC1UmVPgRNMwWkSHZjfjEdqueqhYglmB7nHQ8TDWCTb7lJLtTdhx1btg7UWsAuNIhffUpBo+T+3oh8sg8c41WaX5JaNL19UkD2M0qFd8Sayfr0qeGXnrLrKkS0t56ckjui2rTTmUDKFup4CnEtE7fu6nGYeGSoCwGoRlYQD/SU1/GSIWfs8hSpK3KeSZgUQXk14b7dh2LaqrVKGJLja/hFcQCt2gdGD+Ml+iH+Cy0lqj3D32RSarS3k4mJyTKsGnETyXVlCbJtC7kiZ/gZ7i8ChR2hL1qWb7ZInxaHN7WVbsLxZmEIp0Bf+we6YCbg0JrLMoTqXqfx7lb4bGgIRzD4Kz+U9pve9VS4eU4c7JKX6XVLqg56dRO7Kw8MVipjdSANC/f54eQJ+YfB3RYT4eih7PAmHp62d8GiCJABN36B6oiENrnHkBvFu9JPTwo6BStvfP+fZEKFoxaKO3f78thxD7GZdMp0PLwZagS3G6TDAdY1nwSqtQC0G/9GR+VUHkDi2Mz5yxc/r8tfic+7p22WjmOGSge8joCeO7y5NARFillrggokK5I9rjSYy/pnNrfHBbORUL1ZCBf4FrD4=

The page looks like this:About itty.bitty

Now, one silly issue is that since the itty bitty link is the webpage, the links to pages such as the about page are, well, long. The link https://about.bitty.site does redirect to the about page, and https://how.bitty.site redirects to an FAQ. One could use a URL shortener to refer to the URL with the page, but then that would be hosted somewhere and that kind of defeats the purpose.

It may seem that a URL can’t hold much information, but if you look at the image above, the “app” is a functional calculator!

How does it work?

The idea behind this is cleverly simple. A web page is compressed (using the Lempel–Ziv–Markov chain algorithm) and encoded in Base64 (the way binary data is encoded on the web) and that data is then included in the URL. Specifically, it is placed in the fragment part of the URL. That’s the part beginning with a sharp sign (#) that is used to tell a browser where to go in a page it has loaded. As explained in the itty bitty FAQ, the browser never sends this data to the server but processes it locally. More about that later.

When one goes to the itty bitty page, it downloads (JavaScript) code to decode the fragment in the URL (along with a note about security). That code is covered by the MIT License and so it can be hosted anywhere. I could host a copy on my website if I wanted to.

Why would I want this?

To show friends you know something fun? I suppose that might be one use, but there are more reasonable uses, too. One might be including a page in a QR (Quick Response) or other scannable code. Since QR codes can contain URLs, one could encode a page in a QR or similar code. QR codes have a limit of 4,296 characters, but those are very dense images!

Another use is to share information you don’t want on the server. Since the page is in a fragment and does not get sent to the server, it doesn’t appear on the server itself. If the server were compromised by, say, a government, the actual data of the itty bitty pages would not be there.

What about security

The itty bitty page makes it clear that there may be security issues. In order for the code downloaded from itty.bitty.site to decode the URL, scripting has to be enabled. That means that the page encoded in the URL could potentially contain a malicious script. So, as always, don’t view URLs unless you completely trust the source.

A simple example

I wrote this little demo to show the execution of JavaScript and the display of simple text:


<html>
<body>
A quick demo of a script in itty.bitty.site
<p id="b">Click here.</p>
<script>
document.getElementById("b").onclick = function() {document.getElementById("b").innerHTML = "Clicked";};
</script>
</body>
</html>

I pasted it into the itty bitty home page, and supplied a title. Here is what it looked like:

I clicked on the menu link and copied the URL. Here it is:

https://itty.bitty.site/#A_demo_of_itty_bitty/data:text/html;charset=utf-8;bxze64,XQAAAALjAAAAAAAAAAAeGgqG70rWh/ElZTMXBaG+YoeqIQcZCWPpRlIiTEW0VmpB5vn2trBHz10rh6iESQBIgw8Vc/mLf4jyGGOC9gk3xcOMRKsK4ijz5XHCti00kUZPSE7eGxE/5TalVbOfMyKNYPrC32ZVhkNIMRGBv88LsDvqxYAYn3ZTmrcKHI3n/j+ouVjRJqOGsZMQD582dp9JsmrDPSqgMkpjaKnrR6RpeRCv/4Y1uwA=

I find the idea intriguing. Processing the fragment part of a URL isn’t unique to itty bitty, either. It may or may not be useful, but it can be entertaining. What uses can you think of for the webpage-in-URL concept? What other uses can you see for using the fragment as data to a web page? Tweet @jjmcdermott and let me know!

Related Training:
Web Development

image sources

  • aboutittybitty: itty.bitty.site
  • ittybitty-demo: John McDermott

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.