{"collection":"posts","slug":"1731984900000-pure-internet-nfc","cid":"bafkreie5ij7rghiderfncm6auo77ico5ybud2wf2c6usd6m2ljdh24ezli","title":"Pure Internet: NFC","excerpt":"HTML, CSS \u0026 minimal JS combined with NFC tech to create serverless web experiences.","body":"Strip the web back to HTML, CSS, and a sprinkle of JavaScript. No build process, no stylesheets, no dependencies.\n\nWhat if you put it on an NFC card?\n\n## NFC\n\nMost modern phones can read NFC. Beyond contactless payments and transit cards, NFC can carry arbitrary data through NDEF (NFC Data Exchange Format) records.\n\nThe 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.\n\n## Data URLs\n\nData URLs encode a file inline, usually as base64. They've been around forever, mostly for small images in CSS:\n\n```\nbackground-image: url(data:image/png;base64,iVBORw0KGgo...)\n```\n\nSince 2017, browsers refuse data URLs for top-level navigation. Good for security, fatal for the original idea.\n\n## First attempt\n\nPlan A: store an entire website as base64 on an NFC card. Tap to open. No server.\n\nTop-level navigation said no. Users can still copy and paste, but tap-to-open is dead:\n\n```\ndata:text/html;base64,PHRpdGxlPk9mZmxpbmU8L3RpdGxlPjxib2R5PjxoMT5PZmZsaW5lPC9oMT48cD5UaGlzIGlzIGEgd2ViIHBhZ2UsIGJ1dCBpdCdzIG5vdCBvbmxpbmUuPC9wPjxwPkl0IGlzIGVuY29kZWQgaW4gdGhlIFVSSSwgd2hpY2ggaXMgc3RvcmVkIG9uIHRoZSBORkMgY2FyZCB5b3UganVzdCBzY2FubmVkLjwvcD48cD5UaGFuayB5b3UgZm9yIHZpc2l0aW5nLjwvcD48L2JvZHk%2B\n```\n\nThe `file://` scheme hits the same security wall. Raw HTML text records need manual handling. Custom MIME types confuse most readers.\n\n## ENS + IPFS\n\nWorkaround: ENS name, an HTML file pinned to IPFS, an iframe to render the data URL, an NFC card storing an [eth.limo](http://eth.limo) URL, and base64 content in the hash.\n\nThe HTML:\n\n```\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003ePURE INTERNET\u003c/title\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ciframe id=\"f\"\u003e\u003c/iframe\u003e\n    \u003cscript\u003e\n      const iframe = document.getElementById(\"f\");\n      iframe.src = location.hash\n        ? `data:text/html;base64,${location.hash.slice(1)}`\n        : \"data:text/html;base64,PHA+UFVSRSBJTlRFUk5FVDwvcD4=\";\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nEncode the page as base64. Stick it on the NFC card as part of an [eth.limo](http://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.\n\n## Is this pure internet?\n\nProbably the closest you can get. IPFS and ENS are still infrastructure, but the rest is HTML, CSS, JS, and a tag in your hand.\n\nThe 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.","tags":["web-development","nfc","data-urls","html","ipfs","egg","decentralized-web"],"published":true,"createdAt":"2024-11-18T10:55:00Z","updatedAt":"2025-05-23T14:09:00Z"}