Comment by myfonj
6 days ago
You don't even need the base64 encoding for dataURIs: just throw the text payload after mime-type and a comma:
data:text/html,<!doctype html><title>Hi!</title><p>Hello.
This is also a valid self-contained HTML document. You have to add `;charset=utf-8`, if you need to go beyond ASCII, and for some browsers watch for URI-encoding of some syntactically significant characters (like `#` and `%`, `?`).
Base64 is indeed good to be "safe" and/or somewhat 'conceal' the payload, but it also makes it larger by 1/3 (every three bytes of input become four characters of the base64 output). So taking the risk some devices would not like raw "ASCII dataURI", the QR of the backrooms QR could shave off 738 bytes.
BTW, this is my "HTML sandbox" for testing stuff in a browsers that I summon daily through keyword bookmark to test simple stuff:
data:text/html;charset=utf-8;verbatim,<!doctype html><html style="color-scheme:dark light"><title>HTML sandbox 2.0.6</title><meta name=viewport content=width=device-width,initial-scale=1><body style=margin:0;display:flex;height:100vh onload="OT=(DC=document).title,H=(L=location).hash.slice(1)||'',RX=/(^data:.+?(;verbatim)?,)?([^]*)/,A.value=H.match(RX)[2]?H:decodeURIComponent(H)||A.value;T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=()=>{if(W!=(V=A.value))W=V,M=V.match(RX),I.src=M[2]?V:(M[1]||D)+encodeURIComponent(M[3]),DC.title=NT=((TM=V.match(/<title\b[^]*?\x3E([^]*?)<\/title\b/m))&&(NT=TM[1])&&(NT=NT.trim())&&(DC.title=NT+' @ '+OT))||OT};F()"><textarea autocapitalize=off style=resize:horizontal;width:50vw autofocus id=A onkeyup=clearTimeout(T);T=setTimeout(F,400) onblur=try{history.pushState({},NT,'\u0023'+(S=I.src.replace(E,'')))}catch(e){L.hash=S}><!doctype html><html lang="en" style="color-scheme: dark light;">%0A<meta name="viewport" content="width=device-width, initial-scale=1">%0A<title>%0A%0A</title>%0A<style>%0A%0A</style>%0A<body>%0A%s%0A<script>%0A%0A</script>%0A</textarea><iframe style=border:0;flex-grow:1;width:0 id=I>
I think I'm going to find this useful.
Duck browser doesn't allow it to be saved as a bookmark, but Safari is fine with it.
Yeah, sadly, top-level dataURIs are increasingly neglected and banished from browsers, mainly because they were misused for scams in the past; for example no modern browser allows navigating to top-level dataURI by clicking a link. Only bookmarks, manual entry, and external invocation (share) work (sometimes).
Anyway, I have put some remarks and docs for that thing into https://gist.github.com/myfonj/c8ce74bf549e19600026ce9022388... , if you are interested.
By the way, this "Backrooms" can also work from non-base64 URI and as such is significantly smaller (https://github.com/Kuberwastaken/backdooms/pull/3#issuecomme...)
Awesome stuff! I'll play around with it in a bit!
Thanks for sharing :)
1 reply →