javascript - 在DOM中嵌入任意JSON的最佳实践?

我正在考虑在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的替代方案,我已经确定这是我遇到的特定问题的最佳解决方案。 我只是在寻找最好的方法。

Ben Lee asked 2019-08-19T00:25:02Z
6个解决方案
67 votes

我认为你原来的方法是最好的。 HTML5规范甚至解决了这个问题:

&#34;当用于包含数据块(而不是脚本)时,数据   必须嵌入内联,必须使用数据格式   type属性,不能指定src属性,而且   script元素的内容必须符合要求   根据使用的格式定义。&#34;

请阅读:[http://dev.w3.org/html5/spec/Overview.html#the-script-element]

你已经做到了这一点。 什么不爱? 属性数据不需要字符编码。 您可以根据需要对其进行格式化。 它具有表现力,预期用途很明确。 它并不像一个黑客(例如使用CSS来隐藏你的&#34;载体&#34;元素)。 它非常有效。

Jamie Treworgy answered 2019-08-19T00:25:34Z
20 votes

作为一般方向,我会尝试使用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'));
Horatio Alderaan answered 2019-08-19T00:26:05Z
11 votes

这种在脚本标记中嵌入json的方法存在潜在的安全问题。 假设json数据源自用户输入,则可以创建一个数据成员,该成员实际上会脱离脚本标记并允许直接注入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>

没有办法绕过/编码。

MadCoder answered 2019-08-19T00:26:50Z
5 votes

我建议将JSON放入带有函数回调的内联脚本(一种JSONP):

<script>
someCallback({
    "unicorns": "awesome",
    "abc": [1, 2, 3]
});
</script>

如果在文档之后加载执行脚本,您可以将其存储在某处,可能还有一个额外的标识符参数:someCallback("stuff", { ... });

copy answered 2019-08-19T00:27:22Z
4 votes

参见OWASP的XSS预防备忘单中的规则#3.1。

假设您要在HTML中包含此JSON:

{
    "html": "<script>alert(\"XSS!\");</script>"
}

用HTML创建隐藏的textContent。 接下来,通过编码不安全的实体(例如,&amp;,&lt;,&gt;,&#34;,&#39;,和/)来转义您的JSON并将其放入元素中。

<div id="init_data" style="display:none">
        {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;}
</div>

现在,您可以通过使用JavaScript读取元素的textContent并解析它来访问它:

var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}
Matthew answered 2019-08-19T00:28:08Z
2 votes

我的建议是将JSON数据保存在外部.json文件中,然后通过Ajax检索这些文件。 你没有把CSS和JavaScript代码放到网页上(内联),那你为什么要用JSON呢?

Šime Vidas answered 2019-08-19T00:28:33Z
translate from https://stackoverflow.com:/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom