15 ms·
You are correct. It's a silly hack. Just because it happens to work doesn't make it a good idea. Turn off JavaScript and you just get JSON text.
by greggman3 6y ago
You are correct. It's a silly hack. Just because it happens to work doesn't make it a good idea. Turn off JavaScript and you just get JSON text.
- Kalium 6y ago> Just because it happens to work doesn't make it a good idea. An oft-unheard voice of wisdom and sane engineering practices speaks. Hark, ye mortals.
- pwdisswordfish4 6y agoThis but unironically.
- deleted 6y ago[deleted]
- CGamesPlay 6y agoHere's one that works without JavaScript, you curmudgeon: data:text/html;charset=utf-8,%7B%20%22foo%22%3A%20%22bar%22%2C%20%22baz%22%3A%20%5B%20%22qux%22%20%5D%2C%20%22%23render%22%3A%20%22%3Chtml%3E%3Cbody%3E%3Cdiv%20id%3Dcontent%3E%3Ch1%3EMy%20fancy%20document%3C%2Fh1%3E%3Cp%3EThis%20is%20a%20completely%20%26quot%3Bnormal%26quot%3B%20HTML%20document.%3C%2Fp%3E%3C%2Fdiv%3E%3Cstyle%3Ebody%20%7B%20visibility%3A%20hidden%3B%20%7D%20%23content%20%7B%20visibility%3A%20initial%3B%20position%3A%20absolute%3B%20top%3A%200%3B%20%7D%3C%2Fstyle%3E%3C%2Fbody%3E%3C%2Fhtml%3E%22%20%7D You can paste this directly into your URL bar, and view source to see the valid JSON document.
- Arnavion 6y agoIt's a valid JSON document that's basically unrelated to the HTML that ends up being displayed, so it's not exactly equivalent to the submitted link. What the submitted link achieves is impossible without JS, which is also why it's a cute hack and should only be used in production with the knowledge that it's not going to work well for clients without JS.
- ben174 6y agoClever, but this is the same hack.
- quickthrower2 6y agoCheck out my search engine: data:text/html;charset=utf-8,<meta http-equiv="refresh" content="0;url=http://google.com/ http://google.com/" />
- croon 6y agoAnd now you can no longer read it with a json reader, which I assume was the motivation for the hack to begin with.
- BeefWellington 6y agoI have created a similar silly hack where you can just write markdown directly: # Markdown header ## Subheader ### Section header 1. Numbered 1. List - Unordered - List [//]: # (<html><body></body><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script>var doc = document.children[0].textContent.split('\n'); md = doc.slice(0, doc.length - 1).join("\n"); document.body.innerHTML = marked(md);</script></html><!--) That last line has varying degrees of invisibility in different markdown viewers I looked at. Obviously there's optimization that could be had here but this is equally hacky IMO and simpler since you can just write MD instead of JSON. You lose a couple of key features though -- templated components for example. However, I imagine you could shoehorn those in without much effort. This has the advantage that without JS enabled you'll get poorly formatted markdown in the browser.
- pietroppeter 6y agothis reminds me of https://casual-effects.com/markdeep/ https://casual-effects.com/markdeep/
- chrismorgan 6y agoThe page says: > I'm creating a blog platform using this concept. Yeah, please don’t; this is an abomination that’s fun for demonstrating and teaching how these things work, but should absolutely never be used in reality. You could use this as your data model foundation upon which to build a generator, but you should never under any circumstances actually serve this stuff.
- lifthrasiir 6y agoMoreover this is not even a "plain JSON". While I don't think the OP doesn't make this exact claim, an arbitrary JSON with the `#render` bootstrap won't necessarily work because the JSON can contain valid HTML tags... Interesting as it stands, utterly useless in practice.
- aidos 6y agoCan’t you put the render at the top and the script can block before anything else to make sure a) it always executes and b) removes all the json content from the page. Or actually, you can probably just put some closing angles before the start of your render to make sure you don’t get broken from above. Little sketchy though.
- bzbarsky 6y agoIf the script were at the top, it would run before any of the rest of the JSON gets inserted into the DOM, so it would (1) not have access to it (unless it sets up an async callback to do it) and (2) not be able to remove it from the DOM (until that callback runs). The script might be able to set up mutation observers that notice stuff being added to the DOM and immediately remove it into a buffer the script maintains. This might actually be pretty viable. > Or actually, you can probably just put some closing angles before the start of your render to make sure you don’t get broken from above. That won't help with the fact that the data will actually be "corrupted" by the HTML parser. This is why all the HTML inside the JSON in the example is HTML-encoded. One plausible fix for _that_ is to have a <plaintext> tag right after your <script>. So put the #render as the first thing in the JSON, set up mutation observers in the script, <plaintext> to prevent HTML-parsing of the rest of the doc, and this might be pretty robust to random HTML bits in the JSON data.
- johnx123-up 6y agoVery good hack. Can we use Google structured data json+ld without validation issue? For example, https://developers.google.com/search/docs/data-types/course#example https://developers.google.com/search/docs/data-types/course#... ?
- botch_san 6y ago> Turn off JavaScript and you just get JSON text. I have JS disabled by default. Until I read your comment I was just confused what was going on.