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

在前后端数据交互的过程中，JSON是最常用的数据格式之一，有时我们需要在JSON响应中携带HTML字符串，让前端拿到后直接渲染页面内容。但HTML本身包含很多特殊字符，如果直接将这些字符放入JSON中，很容易破坏JSON的结构，甚至带来安全隐患，因此需要掌握正确的嵌入方式。

为什么不能直接嵌入原始HTML字符串

JSON的语法规则对字符串中的特殊字符有明确要求，双引号、反斜杠、换行符等字符如果不做处理，会导致JSON解析失败。而HTML字符串中经常会包含这些字符，比如一个普通的HTML片段<div class="content">测试</div>，其中的双引号就会和JSON字符串的边界双引号冲突。

除了格式问题，直接嵌入未处理的HTML还可能引发XSS攻击，如果HTML内容来自用户输入，攻击者可以插入恶意脚本，当前端直接渲染时就会执行这些恶意代码，造成严重的安全问题。

安全嵌入的核心步骤

1. 对HTML特殊字符进行转义

首先要对HTML字符串中的JSON特殊字符和HTML特殊字符做转义处理，JSON要求字符串中的双引号、反斜杠、换行符等必须转义为"、\、n等形式，同时HTML的<、>等字符也建议转义，避免后续解析出现问题。

后端处理时可以使用对应语言的转义函数，以Java为例，转义HTML字符串的代码如下：

import org.apache.commons.text.StringEscapeUtils;

public class HtmlEscapeUtil {
    public static String escapeHtmlForJson(String html) {
        if (html == null) {
            return null;
        }
        // 先转义JSON特殊字符，再转义HTML特殊字符，避免冲突
        String jsonEscaped = StringEscapeUtils.escapeJson(html);
        return StringEscapeUtils.escapeHtml4(jsonEscaped);
    }
}

2. 前端接收后的反转义处理

前端拿到转义后的字符串后，需要先做反转义，再插入到DOM中，避免直接插入转义后的字符显示异常。可以使用浏览器原生的API或者第三方库处理，原生实现示例如下：

function unescapeHtmlForRender(escapedStr) {
    // 创建一个临时DOM元素，利用浏览器的HTML解析能力反转义
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = escapedStr;
    return tempDiv.textContent || tempDiv.innerText || '';
}

// 假设从接口拿到的JSON数据中的html_content字段是转义后的内容
fetch('/api/get_content')
    .then(res => res.json())
    .then(data => {
        const realHtml = unescapeHtmlForRender(data.html_content);
        document.getElementById('content').innerHTML = realHtml;
    });

3. 避免不可信内容的直接渲染

如果HTML内容来自用户输入，即使做了转义，也不建议直接通过innerHTML插入，最好使用DOMPurify这类库做过滤，去除可能的恶意脚本，进一步保障安全。示例代码如下：

import DOMPurify from 'dompurify';

// 先反转义，再过滤
const safeHtml = DOMPurify.sanitize(unescapeHtmlForRender(data.html_content));
document.getElementById('content').innerHTML = safeHtml;

不同场景的注意事项

如果是服务端渲染场景，嵌入的HTML字符串需要确保转义后不会破坏页面原有的HTML结构，同时要避免转义层级过多导致内容显示异常。如果是移动端或者小程序环境，没有DOM API的话，需要使用对应的字符串反转义方法，不要依赖浏览器的解析能力。

另外，在生成JSON响应时，要确保整个JSON的格式是正确的，转义后的字符串作为JSON的值时，外层双引号要正确包裹，避免出现语法错误。可以通过JSON序列化工具自动处理，不要手动拼接JSON字符串，减少出错概率。

JSONHTML转义字符编码前端渲染修改时间：2026-06-11 13:12:35