Pure Internet: NFC

November 18, 2024 2 min read

HTML, CSS & minimal JS combined with NFC tech to create serverless web experiences.

On this page

NFC
Data URLs
First attempt
ENS + IPFS
Is this pure internet?

Strip the web back to HTML, CSS, and a sprinkle of JavaScript. No build process, no stylesheets, no dependencies.

What if you put it on an NFC card?

NFC

Most modern phones can read NFC. Beyond contactless payments and transit cards, NFC can carry arbitrary data through NDEF (NFC Data Exchange Format) records.

The limits matter: a few kilobytes of storage per tag, and iOS handles NFC differently from Android. iOS only honors specific record types and demands an explicit user tap. Android reads more record types and supports background scanning.

Data URLs

Data URLs encode a file inline, usually as base64. They've been around forever, mostly for small images in CSS:

background-image: url(data:image/png;base64,iVBORw0KGgo...)

Since 2017, browsers refuse data URLs for top-level navigation. Good for security, fatal for the original idea.

First attempt

Plan A: store an entire website as base64 on an NFC card. Tap to open. No server.

Top-level navigation said no. Users can still copy and paste, but tap-to-open is dead:

data:text/html;base64,PHRpdGxlPk9mZmxpbmU8L3RpdGxlPjxib2R5PjxoMT5PZmZsaW5lPC9oMT48cD5UaGlzIGlzIGEgd2ViIHBhZ2UsIGJ1dCBpdCdzIG5vdCBvbmxpbmUuPC9wPjxwPkl0IGlzIGVuY29kZWQgaW4gdGhlIFVSSSwgd2hpY2ggaXMgc3RvcmVkIG9uIHRoZSBORkMgY2FyZCB5b3UganVzdCBzY2FubmVkLjwvcD48cD5UaGFuayB5b3UgZm9yIHZpc2l0aW5nLjwvcD48L2JvZHk%2B

The file:// scheme hits the same security wall. Raw HTML text records need manual handling. Custom MIME types confuse most readers.

ENS + IPFS

Workaround: ENS name, an HTML file pinned to IPFS, an iframe to render the data URL, an NFC card storing an eth.limo URL, and base64 content in the hash.

The HTML:

<!doctype html>
<html>
  <head>
    <title>PURE INTERNET</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <iframe id="f"></iframe>
    <script>
      const iframe = document.getElementById("f");
      iframe.src = location.hash
        ? `data:text/html;base64,${location.hash.slice(1)}`
        : "data:text/html;base64,PHA+UFVSRSBJTlRFUk5FVDwvcD4=";
    </script>
  </body>
</html>

Encode the page as base64. Stick it on the NFC card as part of an eth.limo URL like https://pureinternet.eth.limo/#VGhpcyBpcyBQdXJlIEludGVybmV0. Tap loads the IPFS-pinned HTML through ENS. The script pulls the base64 from the hash and renders it in the iframe, which sidesteps the top-level data-URL block.

Is this pure internet?

Probably the closest you can get. IPFS and ENS are still infrastructure, but the rest is HTML, CSS, JS, and a tag in your hand.

The hash trick generalizes. Any page can carry its content in the URL itself: no database, no storage, content that exists only as long as the URL does.