javascript && jQuery 實現(xiàn)html轉(zhuǎn)義

2501207950 發(fā)布于2019-08-20 16:27 / 1841人閱讀

摘要：解決方案實現(xiàn)轉(zhuǎn)義解碼獲取實體借助和函數(shù)來轉(zhuǎn)譯方法獲取設(shè)置的是匹配元素的文本內(nèi)容，且會將中的預(yù)留字符如大于號轉(zhuǎn)換成字符實體，以便于正確顯示方法是獲取設(shè)置匹配元素的內(nèi)容。實現(xiàn)轉(zhuǎn)譯編碼解碼

背景：

做快站項目遇到的一個bug，一圖勝千言，bug如下圖：

這個問題只在某些帳號下出現(xiàn)，絕大數(shù)其他帳號都是正常的，正常情況下是這個樣子的：

為啥會因帳號而已呢？猜測是因為前端渲染模板所用的數(shù)據(jù)惹得禍 :（

分析

查看DOM結(jié)構(gòu)：

正常情況下，藍(lán)框內(nèi)的所有li標(biāo)簽應(yīng)該都在紅筐內(nèi)。

再看渲染模板用的數(shù)據(jù)：

果然，數(shù)據(jù)里面含有html標(biāo)簽，可我在渲染模板之前沒有做轉(zhuǎn)義處理，恩，XSS攻擊就是這么來的。

解決方案

jQuery 實現(xiàn)html轉(zhuǎn)義

function htmlEncode(value){  
  return $("").text(value).html();  
}  
//Html解碼獲取Html實體  
function htmlDecode(value){  
  return $("").html(value).text();  
}

借助text()和html()函數(shù)來轉(zhuǎn)譯html
text() : 方法獲取/設(shè)置的是匹配元素的文本內(nèi)容，且會將HTML中的預(yù)留字符（如大于號（>））轉(zhuǎn)換成html字符實體，以便于正確顯示.
html(): 方法是獲取/設(shè)置匹配元素的html內(nèi)容。

javascript 實現(xiàn)html轉(zhuǎn)譯

//編碼
function html_encode(str)  
    {  
        var s = "";  
        if (str.length == 0) return "";  
        s = str.replace(/&/g, ">");  
        s = s.replace(//g, ">");  
        s = s.replace(/ /g, " ");  
        s = s.replace(/"/g, """);  
        s = s.replace(/"/g, """);  
        s = s.replace(/
/g, "
");  
        return s;  
    }  
  
//解碼  
function html_decode(str)  
{  
    var s = "";  
    if (str.length == 0) return "";  
    s = str.replace(/>/g, "&");  
    s = s.replace(//g, ">");  
    s = s.replace(/ /g, " ");  
    s = s.replace(/"/g, """);  
    s = s.replace(/"/g, """);  
    s = s.replace(/
/g, "
");  
    return s;  
}