💾 Archived View for danq.me › posts › nocode captured on 2023-07-10 at 13:26:39. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

The Page With No Code

2023-01-11

It all started when I saw no-ht.ml, Terence Eden's hilarious response to Salma Alam-Naylor's excellent HTML is all you need to make a website. The latter is an argument against both the silly amount of JavaScript with which websites routinely burden their users, but also even against depending on CSS. As a fan of CSS Naked Day and a firm believer in using JS only for progressive enhancement, I'm obviously in favour.

Terence's site works by delivering a document with a claimed MIME type of text/html, but which contains only the (invalid) "HTML" code <!doctype UNICODE><meta charset="UTF-8"><plaintext> (to work around browsers' wish to treat the page as HTML). This is followed by a block of UTF-8 plain text making use of spacing and emoji to illustrate and decorate the content. It's frankly very silly, and I love it. (My first reaction was "why not just deliver something with Content-Type: text/plain; charset=utf-8 and dispense with the invalid code, but perhaps that's just me overthinking the non-existent problem.)

I think it's possible to go one step further, though, and create a web page with no code whatsoever. That is, one that you can read as if it were a regular web page, but where using View Source or e.g. downloading the page with curl will show you... nothing.

I present: The Page With No Code! (It'll probably only work if you're using Firefox, for reasons that will become apparent later.)

Once you've had a look for yourself and had a chance to form an opinion, here's an explanation of the black magic that makes this atrocity possible:

The page is blank. It's delivered with Content-Type: text/html. Your browser interprets a completely-blank page as faulty and corrects it to a functionally-blank minimal HTML page: <html><head></head><body></body></html>.
<body> and <html> elements can be styled with CSS; this includes the ability to add content: ::before and ::after each element. If only we could load a stylesheet then content injection is possible.
We use the fourth way to inject CSS - a Link: HTTP header - to deliver a CSS payload (this, unfortunately, only works in Firefox). To further obfuscate what's happening and remove the need for a round-trip, this is encoded as a data: URI.

This is one of the most disgusting things I've ever coded, and that's saying a lot. I'm so proud of myself. You can view the code I used to generate this awful thing on Github.

Links

No-ht.ml

Terence Eden

Salma Alam-Naylor

HTML is all you need to make a website

CSS Naked Day

https://no-ht.ml/

Explanation of Terence's no-ht.ml site, from his blog

The Page With No Code

Firefox

https://danq.me/wp-content/no-code-webpage/

MDN Web Docs: CSS 'content' property

My blog post: The Fourth Way to Inject CSS

Github Gist showing how The Page With No Code was generated