The Web page With No Code – Dan Q

2023-01-21 02:51:24

It began once I noticed no-ht.ml, Terence Eden‘s hilarious response to Salma Alam-Naylor‘s glorious HTML is all you need to make a website. The latter is an argument towards each the foolish quantity of JavaScript with which web sites routinely burden their customers, but in addition even towards relying on CSS. As a fan of CSS Naked Day and a agency believer in utilizing JS just for progressive enhancement, I’m clearly in favour.

Screenshot showing Terence Eden's no-ht.ml website, which uses plain text ASCII/Unicode art to argue that you don't need HTML. — Clearly no-ht.ml is to be taken as tongue-in-cheek, however as you’re about to see: it caught my curiosity and bought me considering: how might I am going *even additional*.

Terence’s web site works by delivering a doc with a claimed MIME sort of textual content/html, however which comprises solely the (invalid) “HTML” code <!doctype UNICODE><meta charset="UTF-8"><plaintext> (to work round browsers’ want to deal with the web page as HTML). That is adopted by a block of UTF-8 plain textual content making use of spacing and emoji for instance and embellish the content material. It’s frankly very foolish, and I find it irresistible.

I feel it’s attainable to go one step additional, although, and create an internet web page with no code by any means. That’s, one that you would be able to learn as if it have been a daily internet web page, however the place utilizing View Supply or e.g. downloading the web page with curl will present you… nothing.

I current: The Page With No Code! (It’ll in all probability solely work should you’re utilizing Firefox, for causes that may turn into obvious later.)

Screenshot showing my webpage, "The Page With No Code". Using white text (and some emojis) on a blue gradient background, it describes the same thought process as I describe in this blog post, and invites the reader to "View Source" and see that the page genuinely does appear to have no code. — I’d encourage you to go to *The Web page With No Code*, use View Supply to verify for your self that it really has no code, and see should you can work out for your self the way it manages this feat… earlier than coming again right here for an evidence. Once more: in all probability Firefox-only.

When you’ve had a search for your self and had an opportunity to kind an opinion, right here’s an evidence the black magic that makes this atrocity attainable:

The web page is clean. It’s delivered with Content material-Sort: textual content/html. Your browser interprets a completely-blank web page as defective and corrects it to a functionally-blank minimal HTML web page: <html><head></head><physique></physique></html>.
<physique> and <html> parts will be styled with CSS; this contains the power so as to add content: ::earlier than and ::after every component. If solely we might load a stylesheet then content material injection is feasible.
We use the fourth way to inject CSS – a Hyperlink: HTTP header – to ship a CSS payload (this, sadly, solely works in Firefox). To additional obfuscate what’s occurring and take away the necessity for a round-trip, that is encoded as an information: URI.

Screenshot showing HTTP headers returned from a request to the No Code Webpage. A Link: header is highlighted, it contains a data: URL with a base64-encoded CSS stylesheet. — The stylesheet – and all of the web page content material – is true there within the Hyperlink: header should you simply care to decode it! Observe that whereas 5.84kB of knowledge are transferred, the browser rightly states that the web page is zero bytes in dimension.

This is likely one of the most disgusting issues I’ve ever coded, and that’s saying quite a bit. I’m so happy with myself. You may view the code I used to generate this awful thing on Github.