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

Question

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

Answer 1

我认为你原来的方法是最好的.HTML5规范甚至解决了这个用途:

"当用于包含数据块(而不是脚本)时,数据必须内联嵌入,数据格式必须使用type属性给出,不得指定src属性,并且脚本元素的内容必须符合为所用格式定义的要求."

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

你完全是这样做的.什么不爱？属性数据不需要字符编码.您可以根据需要对其进行格式化.它具有表现力,预期用途很明确.它不像是一个黑客(例如使用CSS来隐藏你的"载体"元素).这完全有效.

Answer 2

作为一般方向,我会尝试使用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'));

Answer 3

这种在脚本标记中嵌入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>

没有办法绕过/编码.

Answer 4

HTML5 包含一个用于保存机器可读数据的<data>元素。作为 \xe2\x80\x94 也许更安全的 \xe2\x80\x94 替代方案，<script type="application/json">您可以将 JSON 数据包含在value该元素的属性中。

\n\n

\r\n

\r\n

const jsonData = document.querySelector(\'.json-data\');\r\nconst data = JSON.parse(jsonData.value);\r\n\r\nconsole.log(data)

\r\n

<data class="json-data" value=\'\r\n  {\r\n    "unicorns": "awesome",\r\n    "abc": [1, 2, 3],\r\n    "careful": "to escape &#39; quotes"\r\n  }\r\n\'></data>

\r\n

\r\n

\r\n

\n\n

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

\n

Answer 5

请参阅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>"}

Answer 6

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

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

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