在HTML属性中存储JSON的最佳方法?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (140)

我需要将JSON对象放入HTML元素的属性中。


使用PHP和jQuery的编辑示例解决方案

将JSON写入HTML属性:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

使用jQuery检索JSON:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});
提问于
用户回答回答于

HTML不需要验证。

为什么不呢?验证非常容易,会发现很多错误。使用HTML 5data-*属性。

JSON对象可以是任意大小的(即巨大的)。

我没有看到任何关于属性大小的浏览器限制的文档。

如果确实遇到它们,则将数据存储在<script>。定义对象和映射元素id到那个对象中的。

如果JSON包含特殊字符怎么办?(例如,{test:‘<“myString/>’})

只需遵循在属性值中包含不受信任数据的常规规则。使用&amp;&quot;(如果用双引号包装属性值)或&#x27;(如果用单引号包装属性值)。

但是,请注意,这不是JSON(它要求属性名称是字符串,字符串仅用双引号分隔)。

用户回答回答于

取决于你把它放在哪里,

  • <div>正如你所问的,需要确保JSON不包含可以启动标记、HTML注释、嵌入式doctype等的HTML特例。你至少要避免<,和&以这样的方式,原始字符不会出现在转义序列中。
  • <script>元素,以确保JSON不包含结束标记。</script>或转义文本边界:<!---->
  • 在事件处理程序中,您需要确保JSON保留其含义,即使它具有类似HTML实体的内容,并且不会打破属性边界("')

对于前两种情况(以及旧的JSON解析器),你应该对U+2028和U+2029进行编码,因为它们是JavaScript中的换行符,即使它们在JSON中未编码的字符串中也是允许的。

为了正确起见,你需要避免\和JSON引号字符,并且始终编码NUL。

如果HTML可能不需要内容编码,则应该对其进行编码并组织UTF-7 attacks。

在任何情况下,下列转义表都可以工作:

  • NUL->\u0000
  • Cr->\n\u000a
  • LF->\r\u000d
  • "->\u0022
  • &->\u0026
  • '->\u0027
  • +->\u002b
  • /->\/\u002f
  • <->\u003c
  • >->\u003e
  • \->\\\u005c
  • U+2028->\u2028
  • U+2029->\u2029

所以文本的JSON字符串值Hello, <World>!在最后加上一个换行符"Hello, \u003cWorld\u003e!\r\n"。

扫码关注云+社区