将 JSON 存储在 HTML 属性中的最佳方法是什么？

Question

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

1. HTML 不必验证。

   Quentin 回答：Store the JSON in a data-* attribute，这是有效的 HTML5。

2. JSON 对象可以是任意大小 - 即巨大

   由 Maiku Mori 回答：The limit for an HTML attribute is potentially 65536 characters。

3. 如果 JSON 包含特殊字符怎么办？例如 {foo: '<"bar/>'}

   Quentin 回答：按照通常的约定，在将 JSON 字符串放入属性之前对其进行编码。 For PHP, use the htmlentities() 函数。

---

编辑 - 使用 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);

});

Answer 1

HTML 不必验证。

为什么不呢？验证是非常简单的 QA，可以发现很多错误。使用 HTML 5 data-* 属性。

JSON 对象可以是任意大小（即巨大）。

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

如果您确实遇到了它们，请将数据存储在 <script> 中。定义一个对象并将元素 ids 映射到该对象中的属性名称。

如果 JSON 包含特殊字符怎么办？ （例如 {test: ''})

只需遵循在属性值中包含不受信任数据的常规规则即可。使用& 和"（如果将属性值用双引号括起来）或'（如果将属性值用单引号括起来）。

但是请注意，这不是 JSON（它要求属性名称是字符串，并且字符串只能用双引号分隔）。

Answer 2

取决于你把它放在哪里，

• 在 <div> 中，如您所问，您需要确保 JSON 不包含可能启动标记、HTML 注释、嵌入文档类型等的 HTML 特殊内容。您至少需要转义 < 和 @ 987654325@，这样原始字符就不会出现在转义序列中。
• 在<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

因此，文本 Hello, <World>! 末尾带有换行符的 JSON 字符串值将是 "Hello, \u003cWorld\u003e!\r\n"。

Answer 3

另一种方法 - 将 json 数据放入 <script> 标记内，但不是 type="text/javascript"，而是 type="text/bootstrap" 或 type="text/json" 类型，以避免 javascript 执行。

然后，在你程序的某个地方，你可以这样请求它：

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

在服务器端，您可以执行以下操作（此示例使用 php 和 twig）：

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

Answer 4

另一种选择是对 JSON 字符串进行 base64 编码，如果您需要在 javascript 中使用它，请使用 atob() 函数对其进行解码。

var data = JSON.parse(atob(base64EncodedJSON));

Answer 5

对于简单的 JSON 对象，下面的代码可以工作。

编码：

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

解码：

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

Answer 6

你可以使用knockoutjs，

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

输出

名字：杰森 姓氏：蒙特罗索

检查这个： http://learn.knockoutjs.com/

Answer 7

这里没什么特别的。在 PHP 中，通过 htmlspecialchars 运行 JSON 字符串，以确保没有特殊字符可以解释为 HTML。来自 Javascript，无需转义；只需设置属性即可。

Answer 8

另一个可以使用的想法是将 JSON 数据作为 base64 字符串存储在属性中，然后使用 window.atob 或 window.btoa 将其恢复为可用的 JSON 数据。

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>

Answer 9

你可以做的是像这样在你的元素周围使用 cdata

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

其中 mydata 是原始 json 字符串。希望这对您和其他人有所帮助。