在DOM中嵌入任意JSON的最佳实践？

我正在考虑像这样在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);

这有效，但这是最好的方法吗？这是否违反任何最佳做法或标准？

注意：我不是在寻找在DOM中存储JSON的替代方法，我已经决定这是解决我遇到的特定问题的最佳解决方案。我只是在寻找最佳方法。

我认为您的原始方法是最好的。HTML5规范甚至解决了这种用法：

“当用于包含数据块（相对于脚本）时，必须以嵌入式方式嵌入数据，必须使用type属性指定数据格式，不得指定src属性，并且必须包含script元素的内容符合为使用的格式定义的要求。”

在这里阅读：http : //dev.w3.org/html5/spec/Overview.html#the-script-element

您已经做到了。什么不是爱？属性数据无需根据需要进行字符编码。您可以根据需要对其进行格式化。它表现力强，预期用途明确。感觉不像是黑客（例如，使用CSS隐藏“ carrier”元素）。这是完全有效的。

作为一般方向，我将尝试使用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数据源自用户输入，则有可能制作一个数据成员，该成员实际上将脱离script标签并允许直接注入dom。看这里：

http://jsfiddle.net/YmhZv/1/

这是注射

<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">
        {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;}
</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", { ... });

我的建议是将JSON数据保留在外部.json文件中，然后通过Ajax检索这些文件。您没有将CSS和JavaScript代码放在网页上（内联），那么为什么要使用JSON？

HTML5包含用于保留机器可读数据的<data>元素。作为（也许更安全）替代<script type="application/json">您可以将JSON数据包括在该value元素的属性中。

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 &#39; quotes"
  }
'></data>

在这种情况下'，"如果您选择用双引号将值引起来，则需要用或替换所有单引号。否则，建议您像其他答案一样冒险XSS攻击。