我正在考虑在 DOM 中嵌入任意 JSON，如下所示：
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3]
}
</script>
这类似于在 DOM 中存储任意 HTML 模板以供以后与 JavaScript 模板引擎一起使用的方式。在这种情况下，我们稍后可以检索 JSON 并使用以下命令对其进行解析：
var stuff = JSON.parse(document.getElementById('stuff').innerHTML);
这有效，但这是最好的方法吗？这是否违反了任何最佳实践或标准？
注意：我不是在寻找在 DOM 中存储 JSON 的替代方案，我已经确定这是我遇到的特定问题的最佳解决方案。我只是在寻找最好的方法。
我认为你的原始方法是最好的。HTML5 规范甚至解决了这种用途：
“当用于包含数据块（与脚本相对）时，数据必须嵌入内联，必须使用 type 属性给出数据格式，不得指定 src 属性，并且脚本元素的内容必须符合为所用格式定义的要求。”
在这里阅读：http : //dev.w3.org/html5/spec/Overview.html#the-script-element
你已经做到了。什么叫不爱？不需要对属性数据进行字符编码。如果需要，您可以对其进行格式化。它具有表现力，预期用途很明确。感觉不像是一个黑客（例如，使用 CSS 来隐藏您的“运营商”元素）。这是完全有效的。
作为一个总体方向，我会尝试使用HTML5 数据属性来代替。没有什么可以阻止您输入有效的 JSON。例如：
<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>
如果您使用的是 jQuery，那么检索它就像：
var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));
这种在脚本标签中嵌入 json 的方法存在潜在的安全问题。假设 json 数据源自用户输入，则可以制作一个数据成员，该成员实际上会脱离脚本标记并允许直接注入到 dom 中。看这里：
这里是注射
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3],
"badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ",
}
</script>
没有办法转义/编码。
请参阅OWASP 的 XSS 预防备忘单中的规则 #3.1。
假设你想在 HTML 中包含这个 JSON：
{
"html": "<script>alert(\"XSS!\");</script>"
}
<div>在 HTML 中创建一个隐藏。接下来，通过对不安全实体（例如，&、<、>、"、' 和、/）进行编码来转义您的 JSON，并将其放入元素中。
<div id="init_data" style="display:none">
{"html":"<script>alert(\"XSS!\");</script>"}
</div>
现在您可以通过textContent使用 JavaScript读取元素的 并解析它来访问它：
var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}
我建议将 JSON 放入带有函数回调（类型JSONP）的内联脚本中：
<script>
someCallback({
"unicorns": "awesome",
"abc": [1, 2, 3]
});
</script>
如果在文档之后加载执行脚本，您可以将其存储在某处，可能带有额外的标识符参数： someCallback("stuff", { ... });