Putting Websites Inside of Qr Codes

A recent hackclub event opened me up to the world of qr codes, and what its possible to fit inside of them.

Qr Codes

There are a bunch of diffrent "versions" of qr codes, (1 to 40) 1 is the smallest, 40 is the largest

Image Credit¹

Each version has a maximum data capacity (and includes error correction) version 1 can contain a max amount of 25 alpha-numeric charaters, and version 40 can contain a maximum of 4,296 (or 2,953 bytes)

Thats enough space to encode some (albiet incredibly basic) websites.

Data URLs

Thats great! we can just make a website now, minify it down to get some bytes back, and its smooth sailing right? not quite.

To display the website, we leverage data URLs (formerly known as data URIs).

I don't want to yap to hard about them, but it's basicly just a way to put content directly in the browser. if you copy and paste the following into a new tab, you should get a fully fledged html document. This example uses URL encoding, but data URLs can alse be base64 encoded.

data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E

Browsers dont let you hyperlink data: urls, you have to copy and paste and open in a new tab.

AGGGHHH nothing is ever that easy

So the size limit to making a qr code is ~2,900 bytes? Lets go as close to the limit as I can get, then encode it to base64!

Bas64 sucks. It makes my inky dinky little website from 2638 bytes to 3520, over the limit! Thats a 133% increase! Past me was dumb at the time, and didn't know any better so I kept on removing things from my site until it fit within the limit. I asked a question in the slack about my bundle getting bigger after base64, and someone commented,

Don't use the base64!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Just do data:text/html, and then paste your HTML code after!

At the time I was confused, dumb, and tired, and went to bed.

But there is a better way!

But future me prevailed! (mostly because your reading this right now)

Someone shared a tool that could generate qr codes with things all the way up to the 2,953 byte limit. I didn't belive it at first, but I tried the full version of my site and it could fit it all in version 40! (the tool in question)

So what was the secret sauce that my base64 encoding lacked?

BY CHEATING.² by deflating the url with deflate-raw before base64 encoding the url, then wrapping that with a oneliner script that reinflates it and then returns the response.

The wrapper looked like this

new Response(
  Uint8Array.from(
    atob(
      "BASE_64_DEFLATED_STRING_HERE"
    ),
    (e) => e.charCodeAt(0) // Convert each character to its char code
  )
)
  .body.pipeThrough(new DecompressionStream("deflate-raw")) // Decompress using deflate-raw
  .getReader()
  .read()
  .then(
    ({ value: e }) => (
      document.open(), // Open the document
      document.write(new TextDecoder().decode(e)), // Write the decompressed content
      document.close() // Close the document
    )
  )
  .catch(console.error); // how you even recover if this errors?

then, all you have to do is urlEncode the wrapper and it's contents, slap a data:text/html,charset=utf-8, on the front of that bad boy, and your good to encode to a qr code. All you need to do with the output from that is to drop it into any generic qr encoder, like the (debian) linux qrencode package, or some online one (this is the one I like).

And thats it! put websites in qr codes.

There are some caviats though

• Some Browsers (at least in my experience ) disable storage inside of data: urls
• ios (at least at the time of writing) will not recognize data urls as something that should open in safari, and instead give a "qr code unreadable error"
• Some people are just wary in general of scanning massive qr codes they find out in public (legit I would too)

The End.

It would be cool if someone made a app that could scan and view them, and it could be like a pokedex of random qr codes found out in the world.

Its fun having a creative limitation when making websites, It brings back the fun and enginuity of trying to optimize css as much as possible.

As usual, if you make something cool in a qr code, @ me on the internet.