I Stored a Website in a Favicon(timwehrle.de) |
I Stored a Website in a Favicon(timwehrle.de) |
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>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.
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.
[0]: https://www.schneier.com/blog/archives/2021/02/browser-track...
The link to the supercookie site is dead unfortunately.
Related interesting project: https://github.com/EtherDream/web2img
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
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.)
But yeah, sentences that only have 3-4 word each feel like 3rd grade writing; I couldn't read it.
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)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.
co index.html favicon.png
It's also pretty interesting to think how an attacker could exploit images on his behalf. Never thought that would be a way!!!
Thanks!
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
Must EVERYTHING be polluted by ad tech & privacy intrusions?
Is the navigation of the site also AI generated? This doesn't make any sense and proves why these AI detectors don't work