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 27 minutes ago | parent | next [-]

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

	▲	GoToRO 2 minutes ago \| parent \| next [-]
		ai says [^] is not portable; I did not test it. Too bad, I'll stick to [\s\S].
	▲	MomsAVoxell 11 minutes ago \| parent \| prev [-]
		[\s\S] vs. [^] A quixotic windmill tilt if ever I saw one.

▲ weetii 4 hours ago | parent | prev | next [-]

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 4 hours ago | parent [-]

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

	▲	weetii 4 hours ago \| parent [-]
		Good point, I might add a section in the article where I list alternative approaches. Thanks

▲ chrismorgan an hour ago | parent | prev | next [-]

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 2 hours ago | parent | prev [-]

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.