如何在 JSON 响应中安全嵌入 HTML 字符串-html教程-PHP中文网

如何在 JSON 响应中安全嵌入 HTML 字符串

JSON 可以合法包含任意 HTML 字符串，关键在于严格遵循 JSON 字符串编码规范：双引号、反斜杠及控制字符必须正确转义；使用成熟 JSON 库（如 Jackson、Gson 或原生 JSON.stringify/parse）自动处理，切勿手动拼接。

json 可以合法包含任意 html 字符串，关键在于严格遵循 json 字符串编码规范：双引号、反斜杠及控制字符必须正确转义；使用成熟 json 库（如 jackson、gson 或原生 `json.stringify/parse`）自动处理，切勿手动拼接。

在 Web API 设计中，将 HTML 片段作为字符串嵌入 JSON 响应（例如 {"data": "<div class='"msg"'>Hello & <b>world</b> </div>"}）是常见需求，但极易因转义不当引发解析错误或 XSS 风险。其核心原则是：HTML 内容本身无需 HTML 实体编码（如 "、），而必须严格遵守 JSON 字符串的转义规则。

✅ 正确做法：交由标准 JSON 库自动编码
现代语言生态均提供健壮的 JSON 序列化工具，它们会自动完成以下转换：

" → "
→ \
换行符 → （或 u000a）
制表符 →
其他 Unicode 字符保持原样（如中文、emoji）

例如 Java（Jackson）：

ObjectMapper mapper = new ObjectMapper();
Map<string string> response = Map.of("error", "", "data", "<script>alert("XSS?")</script>");
String json = mapper.writeValueAsString(response); // 自动转义，输出合法 JSON</string>

JavaScript（服务端或客户端）：

const data = { error: "", data: '<div onclick="alert('click')">Test</div>' };
const json = JSON.stringify(data); // 安全生成：{"error":"","data":"<div onclick=""alert('click')"">Test</div>"}

❌ 错误做法：手动拼接或双重编码

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

❌ 手动替换 " 为 "：这会污染原始 HTML 结构，导致 <script>"use strict"</script> 变成 <script>"use strict"</script> —— 浏览器无法执行 JS；
❌ 先 HTML 编码再塞入 JSON：既破坏语义，又增加客户端解码负担，且无法覆盖所有上下文（如 <style></style> 中的 CSS、<script></script> 中的 JS）；
❌ 直接字符串拼接（如 "{"data":" + html + "}）：一旦 html 含未转义的 " 或换行，JSON 立即非法。

⚠️ 注意事项与最佳实践

永远信任 JSON 库，不信任手写转义逻辑：Jackson、Gson、json.dumps()、JSON.stringify() 等均通过 RFC 8259 合规测试，能正确处理边界字符（如 U+2028 行分隔符）；
客户端渲染时需明确上下文：若用 element.innerHTML = jsonData.data，确保该 HTML 已被服务端充分信任；若含用户输入，务必在服务端进行 XSS 过滤（如使用 OWASP Java HTML Sanitizer），而非依赖 JSON 转义；
避免混合编码层：JSON 转义 ≠ HTML 转义 ≠ URL 编码。三者目标不同，不可替代——JSON 保证结构合法，HTML 转义防止注入，URL 编码用于路径参数；
调试技巧：用 JSONLint 验证响应体；Chrome DevTools 的 Console 中执行 JSON.parse(yourJsonString) 可快速暴露格式错误。