|
|
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. |
|
|
|
|
|
|
|
My server-side implementation of this broke in 2023 after I upgraded Nginx; my |
|
|
|
new version doesn't support the super-long Link: header needed to make this |
|
|
|
hack work, so I've updated the page to use the Link: to reference the CSS file |
|
|
|
rather than embed it via a data URI. It's not as cool, but it at least means |
|
|
|
you can still see the page. Thanks to Thomas Bradshaw for pointing out the |
|
|
|
problem. |
|
|
|
|
|
|
|
LINKS |
|
|
|
|
|
|
 |
No-ht.ml (https://no-ht.ml) |
|
|
|
Terence Eden (https://shkspr.mobi) |
|
|
|
Salma Alam-Naylor (https://whitep4nth3r.com) |
|
|
|
HTML is all you need to make a website (https://whitep4nth3r.com) |
|
|
|
CSS Naked Day (https://css-naked-day.github.io) |
|
|
 |
https://no-ht.ml/ |
|
|
|
Explanation of Terence's no-ht.ml site, from his blog (https://shkspr.mobi) |
|
|
|
The Page With No Code (https://danq.me) |
|
|
|
Firefox (https://www.mozilla.org) |
|
|
|
https://danq.me/wp-content/no-code-webpage/ |
|
|
|
MDN Web Docs: CSS 'content' property (https://developer.mozilla.org) |
|
|
|
My blog post: The Fourth Way to Inject CSS (https://danq.me) |
|
|
|
Github Gist showing how The Page With No Code was generated (https://gist.github.com) |
|