Instead of going via pixels, why not use a SVG favicon and directly store markup inside it and extract it?
Use this favicon.svg:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="50%" fill="orange"/>
<p>hello HN!</p>
</svg>
use this in your <head> to use a svg favicon:
<link id="favicon" rel="icon" href="favicon.svg" type="image/svg+xml">
finally, use this in your <body> to extract it and add it to your document body:
<script>
fetch(favicon.href).then(r => r.text()).then(t => document.body.innerHTML += t.match(/<p[\s\S]*p>/)[0]);
</script>
Hey, yeah, I wrote the article. This (of course) would be more practical. Thanks for pointing it out. I wanted the payload to "live" in actual pixel data rather than hidden text inside an XML file. That’s why I went this way :)
The ico file format allows multiple resolution icons, so a lot of data
Good point, I might add a section in the article where I list alternative approaches. Thanks
PNG has comment chunks tEXt, zTXt, and iTXt. You can have a completely normal image whose file is stuffed with as much content as you want. That is less fun, I suppose.
Yes, that would also work, thanks for pointing it out
You can use the favicon cache as storage too, by redirecting users across domains. It's been proposed as a potential fingerprinting risk[0], and if a browser naively reuses the cache for incognito mode, it could be used to track users across browser profiles.
[0]: https://www.schneier.com/blog/archives/2021/02/browser-track...
Wasn't this fixed or mostly fixed?
I found the agressively staccato, clearly LLM-generated content extremely difficult to read.
It’s the new internet. So, so annoying.
Yeah, but it's kinda weird. The typical LLM headers and bullet points are there, but it's like someone took an axe to the rest of the spew. I too would rather read someone's original bad writing than their bad editing of AI writing, but it's kinda interesting how this all shakes out.
I wish people would include their prompts.
Which bit? The short sentences?
I would have used a minimal service worker to unpack the web data and present it as if it were just a normal page being loaded.
Would have been more fun if the blogpost was rendered from the favicon.
Pretty cool tbh!!! Would have loved seeing the decoder code!!!
It's also pretty interesting to think how an attacker could exploit images on his behalf. Never thought that would be a way!!!
Thanks!
I guess the decoder is more than the 208 bytes that this page uses..
But maybe you can misuse this and store a session ID / cookie in a favicon (give everyone a unique one) and survive some cookie cleanup and evade privacy restrictions?
Maybe you can still make it that the favicon looks like an image a little to not raise suspicion?
Favicons seem to be cached across private browsing sessions. Oh no
Very cool. I wonder is it possible to make a simple game with also leveraging the webassembly?
Yes, probably. I guess, you’d need a bigger favicon since the minimal Rust WASM binary is around 20KB+ (?)
Fascinating concept! Thanks for sharing this!
very cool and interesting
after reading just the title I wrongly assumed this would be about svg
Surprised that a minimal "website" only requires a small image = few pixels = few bytes to store it? Um, ok.