HTML如何安全传输JSON数据？

Question

如何在HTML页面中安全地嵌入并传输JSON数据，防止XSS攻击？常见做法是将JSON数据通过`<script></script>

Answer 1

一、引言：HTML中嵌入JSON数据的常见场景

在现代Web开发中，前端页面常需从后端获取结构化数据。一种常见做法是将JSON数据直接嵌入HTML文档，通常通过<script>标签实现。例如：

<script>
  window.__INITIAL_DATA__ = {"userId": 123, "name": "张三", "role": "admin"};
</script>
    

这种方式便于JavaScript直接访问初始化数据，但若处理不当，极易引发跨站脚本攻击（XSS）。

二、XSS攻击原理与JSON嵌入的风险分析

XSS（Cross-Site Scripting）攻击利用未充分转义的用户输入，在目标页面注入恶意脚本。当JSON数据包含未经净化的用户内容时，如：

{"content": "<script>alert('xss')</script>"}

若直接拼接进<script>标签输出，浏览器会执行其中的脚本片段。

关键风险点包括：

• 未对JSON中的特殊字符进行HTML实体编码
• 服务端动态拼接JSON字符串时缺乏上下文感知
• 使用innerHTML或document.write注入脚本

三、安全嵌入JSON的核心原则

为防止XSS，必须遵循以下安全准则：

1. 输出编码：在插入到HTML上下文前，对JSON字符串进行适当的转义
2. 上下文感知：区分HTML、属性、JavaScript、CSS等不同上下文的编码规则
3. 使用安全API：优先采用JSON.stringify()而非字符串拼接
4. 内容安全策略（CSP）：限制可执行脚本的来源

特别注意：<script>标签内的JavaScript上下文仍需防范“闭合标签+注入”模式。

四、技术实现方案对比

方法	安全性	性能	兼容性	推荐程度
直接内联JSON	低	高	高	不推荐
JSON + HTML实体编码	中	中	高	谨慎使用
JSON + JavaScript转义	高	高	高	推荐
分离API请求	极高	中	高	强烈推荐

五、推荐实践：安全地通过<script>嵌入JSON

最佳实践是结合JSON.stringify()与上下文转义。服务端代码示例（Node.js/Express）：

app.get('/page', (req, res) => {
  const userData = { name: req.userInput || '', id: 123 };
  const jsonForHtml = JSON.stringify(userData)
    .replace(/</g, '\\u003c')
    .replace(/>/g, '\\u003e')
    .replace(/&/g, '\\u0026')
    .replace(/\\/g, '\\\\');
  res.send(\`
    <script>
      window.__DATA__ = JSON.parse("\${jsonForHtml}");
    </script\>
  \`);
});

上述转义确保<、>、&、反斜杠等不会破坏脚本结构。

六、替代方案与架构演进

随着SPA（单页应用）普及，更安全的替代方案逐渐成为主流：

• 异步API调用：通过fetch()从独立端点获取JSON
• JSON-LD：使用<script type="application/ld+json">语义化嵌入
• Content Security Policy：设置script-src 'self'阻止内联脚本执行

Mermaid流程图展示安全数据流：

graph TD
            A[用户请求页面] -- HTTP --> B(服务端渲染)
            B -- 安全转义JSON --> C[嵌入<script></script>