27/03/2023
I recently learned about itty.bitty.site, a website that makes it possible to encode a web page in a URL. You read that correctly; the page is embedded in the URL.
The page looks like this:
Now, one silly issue is that since the itty bitty link is the webpage, the links to pages such as the about page are 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, defeating 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. Precisely, it is placed in the fragment part of the URL. The part begins with a sharp sign (#) that tells a browser where to go on a loaded page. As the itty bitty FAQ explains, 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). The MIT License covers that code 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. For example, one might include 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 limit 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 is not sent to the server, it doesn't appear on the server itself. So if a government compromised the server, 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. For the code downloaded from the 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 helpful, 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 for a web page? Tweet @jjmcdermott and let me know!
This piece was originally posted on September 13, 2018, and has been refreshed with updated styling.
