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 page looks like this:itty bitty page preview

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:

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

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

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


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 

John McDermott

Written by John McDermott

John McDermott, CPLP, started his work in computer security in 1981 when he caught an intruder in a system he was managing. In recent years his consulting has included security consulting for small businesses. He is Security+ and CCP certified. In his 30 years with Learning Tree John has written and taught courses in programming, networking and computer security. He is the co-author of Learning Tree’s course System and Network Security: A Comprehensive Introduction. John is currently a learning and development consultant in northern New Mexico. He lives in a house made of earth with his wife, who is an artist.