如何在 HTML 脚本标签中插入任意 JSON

Question

我想将 JSON 的内容存储在 HTML 文档的源代码中，在脚本标记内。

该 JSON 的内容确实取决于用户提交的输入，因此需要非常小心地为 XSS 清理该字符串。

我在 SO 上阅读了两个概念。

1。将所有出现的</script 标记替换为<\/script，或将所有</ 替换为<\/ 服务器端。

代码如下所示（以 Python 和 jinja2 为例）：

// view
data = {
    'test': 'asdas</script><b>as\'da</b><b>as"da</b>',
}

context_dict = {
    'data_json': json.dumps(data, ensure_ascii=False).replace('</script', r'<\/script'),
}

// template
<script>
    var data_json = {{ data_json | safe }};
</script>

// js
access it simply as window.data_json object

2。将数据编码为 HTML 实体编码的 JSON 字符串，并在客户端进行 unescape + 解析。 Unescape 来自这个答案：https://stackoverflow.com/a/34064434/518169

// view
context_dict = {
    'data_json': json.dumps(data, ensure_ascii=False),
}

// template
<script>
    var data_json = '{{ data_json }}'; // encoded into HTML entities, like &lt; &gt; &amp;
</script>

// js
function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

var decoded = htmlDecode(window.data_json);
var data_json = JSON.parse(decoded);

此方法不起作用，因为脚本源中的 \" 在 JS 变量中变为 "。此外，它创建了一个更大的 HTML 文档，而且也不是真正的人类可读，所以如果它不意味着巨大的安全风险，我会选择第一个。

使用第一个版本是否存在安全风险？使用 .replace('</script', r'<\/script') 清理 JSON 编码的字符串是否足够？

参考SO：
Best way to store JSON in an HTML attribute?
Why split the <script> tag when writing it with document.write()?
Script tag in JavaScript string
Sanitize <script> element contents
Escape </ in script tag contents

关于这个问题的一些很好的外部资源：
Flask 的 tojson 过滤器的实现 source
Rail 的 json_escape 方法的 help 和 source
在 Django ticket 和 proposed code 中进行了长达 5 年的讨论

Answer 1

以下是我如何处理这个问题中相对较小的部分，即在脚本元素中存储 JSON 的编码问题。简短的回答是您必须转义< 或/，因为它们一起终止了脚本元素——即使在JSON 字符串文字中也是如此。您 can't HTML-encode entities 获取脚本元素。你可以 JavaScript-backslash-escape 斜杠。我更喜欢 JavaScript-hex-escape 小于尖括号为\u003C。

.replace('<', r'\u003C')

我在尝试从 oembed 结果中传递 json 时遇到了这个问题。其中一些包含脚本关闭标签（没有按名称提及Twitter）。

json_for_script = json.dumps(data).replace('<', r'\u003C');

这会将data = {'test': 'foo </script> bar'}; 变成

'{"test": "foo \\u003C/script> bar"}'

这是不会终止脚本元素的有效 JSON。

我从Jinja 模板引擎中的little gem 得到这个想法。当您使用 {{data|tojson}} filter 时运行它。

def htmlsafe_json_dumps(obj, dumper=None, **kwargs):
    """Works exactly like :func:`dumps` but is safe for use in ``<script>``
    tags.  It accepts the same arguments and returns a JSON string.  Note that
    this is available in templates through the ``|tojson`` filter which will
    also mark the result as safe.  Due to how this function escapes certain
    characters this is safe even if used outside of ``<script>`` tags.
    The following characters are escaped in strings:
    -   ``<``
    -   ``>``
    -   ``&``
    -   ``'``
    This makes it safe to embed such strings in any place in HTML with the
    notable exception of double quoted attributes.  In that case single
    quote your attributes or HTML escape it in addition.
    """
    if dumper is None:
        dumper = json.dumps
    rv = dumper(obj, **kwargs) \
        .replace(u'<', u'\\u003c') \
        .replace(u'>', u'\\u003e') \
        .replace(u'&', u'\\u0026') \
        .replace(u"'", u'\\u0027')
    return Markup(rv)

（您可以使用\x3C 而不是\xu003C，这可以在脚本元素中使用，因为它是有效的JavaScript。但最好还是坚持使用valid JSON。）

Answer 2

首先，你的偏执是有根据的。

• HTML 解析器可能会被结束脚本标签欺骗（最好是任何结束标签）
• JS 解析器可能会被反斜杠和引号欺骗（使用非常糟糕的编码器）

是的，对所有可能混淆所涉及的不同解析器的字符进行编码会更“安全”。保持其可读性可能与您的安全范式相矛盾。

注意：JSON字符串编码的结果应该是规范的和OFC的，而不是破坏的，如可解析的。 JSON 是 JS 的子集，因此可以毫无风险地进行 JS 解析。因此，您所要做的就是确保提取 JS 代码的 HTML-Parser 实例不会被您的用户数据欺骗。

所以真正的陷阱是两个解析器的嵌套。实际上，我会敦促您将类似的内容放入单独的请求中。这样你就可以完全避免这种情况。

假设在这样的解析器中可能发生所有可能的样式和纠错，那么其他标签（打开或关闭）可能会实现类似的壮举。

如：向解析器暗示脚本标签已隐式结束。

因此建议以您选择的任何可逆方法对斜杠和所有标签大括号 (/,) 进行编码，而不仅仅是脚本标签的关闭，只要它不会混淆 HTML -解析器：

• 最好的选择是 base64（但您希望更具可读性）
• HTMLentities 可以，虽然会让人感到困惑 :)
• 自己转义也可以，只需转义单个字符而不是 </script 片段

总而言之，是的，最好进行一些更改，但请注意，首先尝试这样的操作，而不是通过 XHR 加载 JSON 或至少使用严格的字符串编码，如 base64。

P.S.：如果您可以从其他人的代码中学习编码字符串，那很好，但如果他们不完全满足您的需要，您不应该求助于“库”或其他人的功能。 因此，宁可编写并彻底测试您自己的（de/en）编码器，并知道这个陷阱已经被堵住了。