I Stored a Website in a Favicon

(timwehrle.de)

136 points | by theanonymousone 4 hours ago

23 comments

  • Tepix 3 hours ago

    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>
    • reichstein 10 minutes ago

      Just because it's my windmill to tilt at: `[\s\S]` can be written shorter and more precisely as `[^]`.

      • weetii 3 hours ago

        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 :)

        • peter-m80 3 hours ago

          The ico file format allows multiple resolution icons, so a lot of data

          • weetii 3 hours ago

            Good point, I might add a section in the article where I list alternative approaches. Thanks

        • chrismorgan 1 hour ago

          Regular expressions? Ugh. Encode it properly as XML in the correct namespace, load it so, and take it from that.

          Or just serve the SVG file and use <foreignObject> to embed the HTML, and include <link rel="icon" href=""> inside it. In theory you should be able to define a <view id="icon"> and use <link rel="icon" href="#icon">, but in practice neither Firefox nor Chromium seems to be handling that properly in a favicon, which is disappointing.

          • berkes 1 hour ago

            An SVG can embed raster images: base64 encoded bytes.

            So you could layer this experiment: favicon is svg, that contains encoded raster, whose bytes are encoded html.

            At the very least it would make a mindboggling CTF step.

          • sheept 4 hours ago

            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...

            • My thoughts instinctively went to "this has to be being used for fingerprinting" when I read OPs blog. Are anti fingerprinting measures taking into account the use of the canvas api with favicons?

              The link to the supercookie site is dead unfortunately.

              • koolala 3 hours ago

                Wasn't this fixed or mostly fixed?

              • herodoturtle 22 minutes ago

                How long before someone ports DOOM into a favicon? ^_^

                (For the technical gurus here, would that even be possible?)

                • shakna 14 minutes ago

                  You can already play it in a favicon [0].

                  But as favicons can be svgs, and let you store foreign objects... You could store the whole thing in the favicon, but might also need a line of JS to extract it.

                  [0] https://vidferris.github.io/FaviconDoom/

                • Walf 3 hours ago

                  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.

                  • weetii 3 hours ago

                    Yes, that would also work, thanks for pointing it out

                  • franciscop 4 hours ago

                    Is this timing coincidence? I just submitted 1h (30 mins before this) ago a website I just made about storing your stock porfolio in a URL + favicon!

                    https://news.ycombinator.com/item?id=48606396

                    • esquivalience 3 hours ago

                      I found the agressively staccato, clearly LLM-generated content extremely difficult to read.

                      • bstsb 2 hours ago

                        for the first time in a while on HN, i disagree with the characterisation as AI-generated. at most it was drafted with an LLM, but the final output is pretty human to me.

                        they used the wrong it’s/its, made But. its own one-word sentence, didn’t capitalise HTML, and used “okayy” in parenthesis. all of this isn’t to criticise the writer - i enjoyed it more seeing these little imperfections that make up a blog post

                        • fortuitous-frog 39 minutes ago

                          Looks largely AI-written, with some human edits: https://www.pangram.com/history/9afe7542-1085-4264-9691-2172...

                          FWIW -- I'm not as repulsed by it as the parent comment. But I do want to substantiate that it _is_ heavily LLM-written.

                          (If you're unfamiliar, Pangram has garnered a reputation as the leading LLM-detector, with a minimal rate of false positives; IME this has come with the tradeoff of being easy to manipulate/tweak your way into turning an LLM-generated piece of text into reporting a false negative, but for most folks that's worthwhile.)

                          • darianvc 18 minutes ago

                            People do be having too much time...

                            Is the navigation of the site also AI generated? This doesn't make any sense and proves why these AI detectors don't work

                        • estetlinus 3 hours ago

                          It’s the new internet. So, so annoying.

                          • noduerme 3 hours ago

                            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.

                            • darianvc 11 minutes ago

                              Might stop using bullet points for not being flagged as AI lol

                              "Very small" -> yeah, this header is mostly AI generated. No hate against the author but this doesn't make any sense as header

                              • netsharc 1 hour ago

                                It doesn't seem to be LLM, but reads like one. The author is German, maybe it's a language expertise thing, maybe he likes the LLM style (unrelated to his nationality).

                                But yeah, sentences that only have 3-4 word each feel like 3rd grade writing; I couldn't read it.

                                • weetii 45 minutes ago

                                  Hey, I've always written like this. In school I couldn't stand subordinate clauses and long sentences because I'd lose my train of thought. But yea, I've noticed that people often find it hard to read so I'm going to work on that

                                  • darianvc 10 minutes ago

                                    You're good fr. People on here who try to make their day about being AI detectives. You're trying to work on it and that's what matters

                                • bartvk 2 hours ago

                                  I wish people would include their prompts.

                                • scottmcdot 3 hours ago

                                  Which bit? The short sentences?

                                • jorisw 1 hour ago

                                  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)
                                  • titularcomment 30 minutes ago

                                    Painful read.

                                    Related interesting project: https://github.com/EtherDream/web2img

                                    • aaubry 23 minutes ago

                                      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.

                                      • berkes 1 hour ago

                                        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.

                                        • Izmaki 46 minutes ago

                                          Wait 'til the author discovers that you can use ping (ICMP) to transfer data, too! :)

                                          • tetrisgm 1 hour ago

                                            Love it. Did you see the old effort to store the page in the url? https://github.com/jstrieb/urlpages

                                          • soanvig 2 hours ago

                                            Honestly it didn't interest me, but I do remember from back in the days full websites rendered by a browser from... Empty files. https://mathiasbynens.be/notes/css-without-html

                                            • beardyw 3 hours ago

                                              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.

                                              • charcircuit 45 minutes ago

                                                You can literally just use the file itself as the favicon. There is no need to over complicate it.

                                                co index.html favicon.png

                                                • superjose 4 hours ago

                                                  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!

                                                  • schobi 4 hours ago

                                                    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

                                                    • RetroTechie 53 minutes ago

                                                      I'm tempted to think that only someone working for a company in the advertising industry could come up with that.

                                                      Must EVERYTHING be polluted by ad tech & privacy intrusions?

                                                  • bozdemir 3 hours ago

                                                    Very cool. I wonder is it possible to make a simple game with also leveraging the webassembly?

                                                  • ab_wahab01 3 hours ago

                                                    Fascinating concept! Thanks for sharing this!

                                                    • neon_me 2 hours ago

                                                      Is it cake? Game for devs.

                                                      • fitsumbelay 3 hours ago

                                                        very cool and interesting after reading just the title I wrongly assumed this would be about svg

                                                        • scoot 3 hours ago

                                                          Would have been more fun if the blogpost was rendered from the favicon.

                                                          • jibal 3 hours ago

                                                            Surprised that a minimal "website" only requires a small image = few pixels = few bytes to store it? Um, ok.

                                                            • shaharamir 3 hours ago

                                                              Amazing!