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

【问题标题】：Secure way of embedding json in a script tag在脚本标签中嵌入 json 的安全方式
【发布时间】：2017-08-10 19:54:46
【问题描述】：

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

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

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

这种在脚本标签中嵌入 json 的方法存在潜在的安全问题。假设 json 数据来自用户输入，则可以制作一个数据成员，该成员实际上会脱离脚本标签并允许直接注入 dom。见这里：

<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，但我不知道该怎么做，以免泄露安全漏洞。

感谢您的帮助。

【问题讨论】：

当您在客户端使用javascript时，我认为没有办法阻止数据。尝试使用后端移动安全信息，如用户 ID

标签： javascript json reactjs xss server-side-rendering

【解决方案1】：

要在脚本元素中包含 JSON，您需要确保数据不能包含结束标记。检查任何键或值中的“

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：