55 comments

[ 2.0 ms ] story [ 52.5 ms ] thread
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!

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>

  <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="50%" fill="orange"/>
    <p>hello HN!</p>
    </svg>
Very cool. I wonder is it possible to make a simple game with also leveraging the webassembly?
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.
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.
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.
Fascinating concept! Thanks for sharing this!
I found the agressively staccato, clearly LLM-generated content extremely difficult to read.
There should be a pathology for thinking things must be LLM generated when it's simply not always the case.

People's ability to discern is completely fried.

I complained about this style of writing on Medium a few months ago. The author of the article replied that it's a preferred style if you anticipate your writing to be read on a small smartphone screen. This kind of makes sense. Whether that article (or this one) was AI-generated or not, I don't know.
Would have been more fun if the blogpost was rendered from the favicon.
Is it cake? Game for devs.
(comment deleted)
I'd imagine the (aggressive) caching of the favicon by browsers makes it a challenge, but you could generate the favicon dynamically, then have JS extract the sequentially. Basically streaming arbitraily large content to a webpage via favicons. Via blocks of 239 bytes.

It may be a fun, novel way to proxy webpages that are otherwise blocked. Though, i guess, the service rendering the favicons can just as easily be blocked then.

Fun Fact: You can use any inline SVG for a favicon and keep it right in the HTML document.

This also allows you to use an emoji directly as a favicon, like so:

  <link
    rel="icon"
    type="image/svg+xml"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>(your emoji here)</text></svg>"
  />
(HN isn't showing the emoji)
Just as a heads-up, if you do this and you want to use #rrggbb color codes or url(#id) links, you have to escape the # as %23, otherwise it gets parsed as a URL fragment and your SVG code is cut off there.
Wait 'til the author discovers that you can use ping (ICMP) to transfer data, too! :)
You can literally just use the file itself as the favicon. There is no need to over complicate it.

cp index.html favicon.png

A neat improvement would be to make the decoder into a bookmarklet. This would avoid the overhead of serving the script. Of course you would rely on the user having the bookmarklet installed, but when you serve HTML you also rely on the user having a web browser installed.