是否有将 JSON 嵌入 HTML 的标准？

Posted 2023-03-05

【中文标题】是否有将 JSON 嵌入 HTML 的标准？

【英文标题】：Is there a standard for embedding JSON in HTML?

【发布时间】：2013-01-01 23:19:46

【问题描述】：

我想在 html 中嵌入 JSON。我发现最优雅的解决方案是使用script-tag 和mime 媒体类型application/json。

<script id="data" type="application/json">
    
        "foo" : "bar"
    
</script> 

这是嵌入 JSON 的标准方式吗？如果没有，上述解决方案是否存在风险？

使用内联 JSON（而不是 JSON-P 服务）的原因：

少量 JSON 数据 更少的 HTTP 请求 内联 JSON 优先于 HTML 属性中的数据

[UPDATE]嵌入 json 的原因。

我有一个用于流量非常高的网站的图库小部件。图库可以包含 100 张或更多张图片。我一次只显示一张图像，其余图像将被延迟加载。但是，所有图像的信息（图像 src）将在页面加载时呈现在 html 中。有多种方法可以在 html 中呈现图像信息。除了使用 JSON，我还可以使用 html 数据属性，如下所示：

<li class="image" data-src="image-path.jpg">
    <!-- image tag will be created here using javascript -->
</li>

将导致：

<li class="image image-loaded" data-src="image-path.jpg">
    <img src="image-path.jpg" />
</li>

上述解决方案的缺点是额外的标记。我宁愿使用 JSON 和 Javascript 模板引擎，例如 doT.js。

【问题讨论】：

你打算如何处理你正在“嵌入”的 json？

您最好将 json 作为对象存储在 javascript 中。没有理由嵌入 json，除非您以某种方式避免使用 javascript 再次访问该 json。

JSON 是一种传输数据的方法。这不是应该为自己而使用的东西。尤其是在处理 JavaScript 时，实际上没有理由更喜欢 JSON（JavaScript Object Notation）而不是实际的 JavaScript 对象。

您要嵌入的是静态内容吗？或者您会提供预先填充了嵌入式 JSON 的 HTML 文件吗？否则我看不到将 JSON 直接嵌入 HTML 的任何优势

@PeeHaa：我已经用一个理由更新了我的问题。

【参考方案1】：

您的建议绝对正确。 script 标记的 type 属性必须是有效的 MIME 描述符。根据the official JSON RFC 第 6 节“IANA 注意事项”：

JSON 文本的 MIME 媒体类型是 application/json。 类型名称：应用程序 子类型名称：json

所以你的 HTML 是有效的：

<script id="data" type="application/json">
    
        "foo" : "bar"
    
</script> 

而且，不，这样做没有额外的风险。

【讨论】：

请阅读benalpert.com/2012/08/03/preventing-xss-json.html 了解可能的 XSS 向量。

@TomMcKenzie 是的，这是与任何用户生成的内容有关的风险。我假设 OP 会生成一个可以安全使用的 json 文件。

我如何获取这个？

@vincentthorpe 你没有fetch 它（fetch 在这种情况下意味着你​​下载了你还没有的数据）。相反，您可以通过 DOM 选择器访问它。例如。在上面的例子中：document.querySelector('#data')（因为script标签有id="data"）。

【参考方案2】：

我正在回答我自己的问题，因为我必须找到解决方案。我的解决方案基于 Bergi 建议使用内联 JSONP。这是一个比找到我的实际问题的答案更好的解决方案，因为不需要手动 JSON 解析。

JSON 数据（和 HTML）是使用 Java 服务器页面 (JSP) 生成的。

第一步

使用 JSP 创建自定义变量名称。它将用作将分配 json 数据的 javascript 全局变量。名称随机生成，防止同一页面命名冲突。

<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>    

第 2 步 脚本标签有一个 cssClassname 来识别它和一个data-var-attribute，以便可以确定自定义变量名称。 $ctrl.json是 JSP 并打印出 JSON。与使用回调函数的 JSONP 不同，使用了全局变量。到目前为止，我还没有遇到任何缺点。

<script class="data" data-var="$jsonpVarName" type="text/javascript">
    window.$jsonpVarName = $ctrl.json;
</script>

第 3 步 访问数据（使用 jQuery）很简单：

var data = window[$('script.data').data('var')];

上下文示例

HTML

<div class="myWidget">
    <button class="fetchData">Fetch Data</button>


    <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>

    <script class="data" data-var="$jsonpVarName" type="text/javascript">
        window.$jsonpVarName = $ctrl.json;
    </script>

</div> 

Javascript

$('button.fetchData', '.myWidget').click(function (e) 

    var data = window[$('script.data', '.myWidget').data('var')];    

);

我正在使用内联 JSONP 加载页面加载所需的 JSON 数据。这不是很多数据，而且是一个 HTTP-Request 更少。

【参考方案3】：

使用内联 JSON（而不是 JSON-P 服务）的原因

您也可以内联 JSON-P。好的，您只需将该方法称为“内联脚本”，但它具有两者的优点:-)

【讨论】：

你说得对，但我在使用 JSON 内联时不需要 JSON-P。

使用 JavaScript 对象文字，您 a) 不需要 JSON.parse 等 b) 可以使用 Date 对象和类似的非 JSON 事物 c) 可以直接附加画廊代码（而不是单独的<script> 元素）d）不需要等待 DOMready 来提取 JSON

a) 和 b) 是有道理的，虽然我只是接收纯文本数据，所以 b) 并不让我担心。你能解释一下 c) 我不确定我理解正确吗？ d) 没有问题，因为 Javascript 仅在加载 DOM 时才开始执行。

当我在您的回答中添加第一条评论时，我正在睡觉。不必使用 JSON.parse 是一个优点，如果我将 JSON 分配给一个类似于 JSON-P 的全局变量，我可以做到这一点。

而使用 JSON-P 让我的主要问题几乎无关紧要 :-)

【参考方案4】：

试试http://json2html.com/，这是将 JSON 转换为 HTML 的好方法。

【讨论】：

这不能回答我的问题

我相信 mahmoud 是在说使用 json2html 之类的模板引擎在需要时将 JSON 提要动态转换为 html。所以做这样的事情......在你的服务器页面加载期间将 JSON 嵌入一个漂亮的脚本标签中，然后使用 json2html 将图像（在需要时）转换为实际的“img”元素。