后端返回的\u003c\u003e等中文Unicode編碼格式，前端js如何轉為HTML?

更新時間：2025年08月02日 09:10:05 作者：馮宣

在前后端交互中,有時后端返回的HTML內容會被轉義為類似“u003c”、“u003e”的Unicode編碼格式,這種編碼方式雖然能防止XSS攻擊,但在前端展示時會顯示為亂碼而非正常的HTML結構,如何在前端將這些被轉義的Unicode字符還原為可正常渲染的HTML？

1. 問題背景與分析

在前后端交互中，后端返回的數(shù)據(jù)可能經(jīng)過安全編碼處理，將HTML特殊字符轉換為Unicode轉義序列（如“<”轉為“u003c”，“>”轉為“u003e”）。這種做法有效防止了XSS攻擊，但前端接收到數(shù)據(jù)后直接插入DOM會導致亂碼顯示。

例如，后端返回的JSON數(shù)據(jù)：

{
    "content": "u003cbu003e加粗文本u003c/bu003e"
}

如果直接將內容插入到DOM中，瀏覽器會將其作為純文本顯示，而非渲染成HTML結構。

2. 關鍵技術點解析

解決此問題的關鍵技術點在于：Unicode轉義字符的解碼和HTML字符串的安全渲染。以下是具體的技術要點：

使用JavaScript內置方法對Unicode轉義字符進行解碼。
確保解碼后的HTML字符串能夠安全地插入到DOM中，避免引入新的XSS風險。

以下是兩種常見的實現(xiàn)方式：

2.1 使用String.fromCharCode解碼

可以通過正則表達式匹配所有Unicode轉義字符，并使用`String.fromCharCode`將其還原為原始字符。

function decodeUnicode(str) {
    return str.replace(/\\u[\dA-F]{4}/gi, function(match) {
        return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
    });
}

const decodedStr = decodeUnicode('u003cbu003e加粗文本u003c/bu003e');
console.log(decodedStr); // 輸出: <b>加粗文本</b>

2.2 使用DOMParser解析HTML

通過`DOMParser`將解碼后的HTML字符串解析為DOM節(jié)點，再插入到頁面中。

function renderSafeHTML(htmlStr) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlStr, 'text/html');
    return doc.body.innerHTML;
}

const safeHTML = renderSafeHTML('<b>加粗文本</b>');
document.getElementById('container').innerHTML = safeHTML;

3. 解決方案流程圖

以下是解決方案的整體流程圖：

graph TD; A[接收JSON數(shù)據(jù)] --> B{是否包含Unicode轉義？}; B --是--> C[調用decodeUnicode解碼]; C --> D[使用DOMParser解析HTML]; D --> E[插入到DOM中]; B --否--> F[直接插入DOM];