HN Distilled

Essential insights from Hacker News discussions

<template>: The Content Template element

Original Article

Hacker News Discussion

This Hacker News discussion revolves primarily around two main themes: the use of <script type="application/json"> for embedding data and the utility and purpose of the HTML <template> element.

Embedding JSON Data in HTML

A significant portion of the conversation focuses on the best practices for embedding JSON data within an HTML page to be consumed by JavaScript.

  • script type="application/json" vs. <template>: The initial question from alserio sets the stage: "are template elements a good place to store json data in the page to be consumed by js?" yuchi suggests as a good alternative: "As good as a script element with type application/json."

  • Content Security Policy (CSP) Considerations: alserio raises a point about CSP: "well one difference is that application/json scripts are still subject to CSP policies." unilynx questions this: "How so? I don't remember ever having seen issues with this. If anything CSP steers you towards this (instead of inline scripts directly assigning to JS variables)." alserio admits their understanding was unclear, stating, "I thought I knew but it seems that the CSP story is unclear. I couldn't find an authoritative source for either position." SahAssar clarifies that CSP primarily blocks execution or inclusion, and since JSON doesn't execute and has a specific MIME type, it likely doesn't pose an issue: "CSP blocks execution/inclusion, but since json does not execute and any json mimetype will not do execution there is no problem."

  • Browser Validation and Performance: joeframbach ponders potential browser behavior: "I wonder if the browser would attempt to validate the contents of a script tag with type json, versus treating it as a blob that would only be validated when parsed/used. And any performance overhead at load time for doing so."

  • Data Attributes as an Alternative: bsmth suggests using data attributes: "You might be interested in data attributes for this use case..." alserio clarifies their need for a generic way to pass configuration data: "Thank you. I was looking at a generic way to pass configuration data to custom elements where I cannot know the shape in advance, since another dev can have different requirements. I support data attributes for simple types but i was wondering if allowing arbitraty json objects via other means could be feasible."

  • JSON as a Subset of JavaScript: hunter2_ points out the relationship between JSON and JavaScript: "Since JSON is a subset of JavaScript, you can just use a script element, and including the json mime type certainly doesn't hurt:" followed by a code example. They also note a limitation: "The JSON data must exist literally within the script element. If you try using a src attribute to request it from elsewhere, the response will not be available via textContent or any other mechanism."

  • Security Risk with </script> Tags: lioeters highlights a potential vulnerability: "About embedding JSON in a script tag, I recently read an article on the risk of a closing tag within the JSON that could break it." They link to an article on "Safe JSON in script tags: How not to break a site."

  • Proposed type="-json": jfagnani advocates for a custom type: "No. I would use