在 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 包含 元素 用于保存机器可读的数据。作为

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 攻击的风险，就像其他答案所建议的那样。

Answer 5

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

假设您想在 HTML 中包含此 JSON：

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

在 HTML 中创建一个隐藏的

。接下来，通过编码不安全实体（例如，&、<、>、"、'、和、/）来转义 JSON，并将其放入元素内。

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

现在您可以通过读取 textContent 并解析它：

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", { ... });

Answer 7

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