在脚本标签中嵌入 json 的安全方式

Question

假设我的 html 文档中有以下脚本标签：

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

我正在我的应用程序中解析此 JSON。有人告诉我...

This method of embedding json in a script tag has a potential security issue. Assuming the json data originated from user input, it is possible to craft a data member that will in effect break out of the script tag and allow direct injection into the dom. See here:

<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>

我需要在脚本标记中嵌入一个 JSON，但我不知道我应该怎么做才能不泄露安全漏洞。

感谢您的帮助。

Answer 1

因为 javascript，本质上在客户端运行，你永远不能相信客户端用它做的任何事情。

所以这听起来像是用户输入或可能用户输入，就像您在服务器上所做的一切一样，这意味着您必须对发送的任何用户输入进行适当的审查给你。据我所知，JSON.parse 被认为是相当安全的。因此，发送到您的服务的任何对象都应该使用它进行解析。

在此之后，您可能需要进行更多的输入清理。确保在将其打印到浏览器时始终转义 HTML。

Answer 2

要在脚本元素中包含 JSON，则需要确保数据不能包含结束标记。检查任何键或值中的“<”是否编码为“\u003c”。然后使用 JSON.parse.

解析内容

您还需要确保各个字符串值的数据不会对字符串进行转义，因此引号和反斜杠也要转义。

周围的上下文也可能导致问题，因为正确的编码可能取决于外部元素的嵌套。引号、html 实体、unicode 行和段落分隔符以及 CDATA 关闭标记可能需要编码。为了安全起见，您可以对任何非字母字符使用这些十六进制转义符。

你的服务器端语言应该有一些函数来像这样编码 JSON。但它们并非都是为安全而设计的，因此请确保它对所有这些字符进行编码。

在脚本标签中嵌入 json 的安全方式

Secure way of embedding json in a script tag

javascript

xss

json

reactjs

server-side-rendering