我正在考虑像这样在DOM中嵌入任意的JSON:
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3]
}
</script>
这类似于将任意HTML模板存储在DOM中，以备稍后使用JavaScript模板引擎。在这种情况下，我们稍后可以检索JSON并使用以下方式解析:
var stuff = JSON.parse(document.getElementById('stuff').innerHTML);
这样做是可行的，但它是否是最佳方式？这是否违反了任何最佳实践或标准？
注意：我不是在寻找将JSON存储在DOM中的替代方案，我已经决定这是我遇到的特定问题的最佳解决方案。我只是想找到最佳方法来实现它。
我认为你原本的方法是最好的。HTML5规范甚至提到了这种用法：
“当用于包含数据块（而不是脚本）时，数据必须内联嵌入，必须使用type属性给出数据格式，不能指定src属性，并且脚本元素的内容必须符合所用格式的要求。”
请点击这里查看：http://dev.w3.org/html5/spec/Overview.html#the-script-element
你已经完全做到了。有什么不喜欢的呢？不需要像属性数据一样进行字符编码。如果你想要，可以进行格式化。它很具表现力，预期用法也很清晰。它不像一个hack（例如使用CSS来隐藏你的“载体”元素）。它是完全有效的。
作为一般方向，我会尝试使用 HTML5数据属性。这里没有阻止您放入有效的JSON。例如：
<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>
var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));
JSON.parse 无法工作（至少原生的 Google Chrome JSON.parse 无法）。JSON 规范要求使用双引号。但是，使用实体（如 ...<unicorns>:...）很容易解决这个问题。 - Ben Lee"I am valid JSON" 并且使用双引号作为标签，或者在字符串中使用单引号，例如 data-unicorns='"My JSON's string"' 因为单引号在编码为 JSON 时没有被转义。 - scrowlerescape(JSON.stringify({str: "'"}))。 - andrsnn在脚本标签中嵌入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>"
}
在HTML中创建一个隐藏的<div>。接下来，通过编码不安全字符实体（例如&、<、>、"、'和/）对JSON进行转义，并将其放置在该元素中。
<div id="init_data" style="display:none">
{"html":"<script>alert(\"XSS!\");</script>"}
</div>
现在你可以使用JavaScript读取元素的textContent并解析它来访问它：
var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}
{name: 'Dwayne "The Rock" Johnson'}中的内部引号。但是，最好使用此方法，因为您的框架/模板库可能已经包含了一种安全的方式来进行HTML编码。另一种选择是使用base64，它既可以在HTML中使用，也可以安全地放置在JS字符串中。在JS中使用btoa()/atob()很容易进行编码/解码，而且对于您来说，在服务器端也很容易实现。 - sstur<data>元素，并将JSON数据包含在value属性中。然后，您只需要使用"转义引号，如果您使用双引号括起数据，或者使用'如果您使用单引号（这可能更好）。 - Rúnar BergHTML5包括一个<data>元素，用于保存机器可读的数据。可以将JSON数据放在该元素的value属性中，这是一种也许更安全的替代方法，比使用<script type="application/json">标签更为可靠。
const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);
console.log(data)<data class="json-data" value='
{
"unicorns": "awesome",
"abc": [1, 2, 3],
"careful": "to escape ' quotes"
}
'></data>在这种情况下，您需要用'替换所有单引号，如果您选择用双引号包含该值，则需要用"替换。否则，您将冒着XSS攻击的风险，就像其他答案所建议的那样。
我建议将JSON放入带有函数回调的内联脚本中（类似于JSONP）：
<script>
someCallback({
"unicorns": "awesome",
"abc": [1, 2, 3]
});
</script>
如果执行脚本在文档加载后加载，您可以将其存储在某个地方，可能带有附加的标识符参数：someCallback("stuff", { ... });
JSON.parse进行处理。在我的网站上，我使用const MY_DATA = ...。 - Indiana Kernick我的建议是将JSON数据保存在外部的.json文件中，然后通过Ajax检索这些文件。你不会将CSS和JavaScript代码放到网页上（内联），那么为什么要这样做呢？
我正在查看一些网站的代码，发现他们在JavaScript中使用了JSON，这就是魔法词。如果你想在HTML中使用JSON，只需做两件事：html>JavaScript>JSON。
<script>
//whatever code to put json in JavaScript(idk)
</script>
</script><script>alert()</script><script>的字符串，那么你将会得到意外的结果。除非你先对数据进行清洁处理，否则这是不安全的。 - silviot<替换为\u003C，这样就足够了吗？这似乎太简单了，真的有效吗... - badp