資訊專欄INFORMATION COLUMN
摘要：解決方案實(shí)現(xiàn)轉(zhuǎn)義解碼獲取實(shí)體借助和函數(shù)來轉(zhuǎn)譯方法獲取設(shè)置的是匹配元素的文本內(nèi)容，且會(huì)將中的預(yù)留字符如大于號(hào)轉(zhuǎn)換成字符實(shí)體，以便于正確顯示方法是獲取設(shè)置匹配元素的內(nèi)容。實(shí)現(xiàn)轉(zhuǎn)譯編碼解碼
背景：
做快站項(xiàng)目遇到的一個(gè)bug，一圖勝千言，bug如下圖：
這個(gè)問題只在某些帳號(hào)下出現(xiàn)，絕大數(shù)其他帳號(hào)都是正常的，正常情況下是這個(gè)樣子的：
為啥會(huì)因帳號(hào)而已呢？猜測是因?yàn)榍岸虽秩灸０逅玫臄?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 實(shí)現(xiàn)html轉(zhuǎn)義
function htmlEncode(value){
return $("").text(value).html();
}
//Html解碼獲取Html實(shí)體
function htmlDecode(value){
return $("").html(value).text();
}
借助text()和html()函數(shù)來轉(zhuǎn)譯html
text() : 方法獲取/設(shè)置的是匹配元素的文本內(nèi)容，且會(huì)將HTML中的預(yù)留字符（如大于號(hào)（>））轉(zhuǎn)換成html字符實(shí)體，以便于正確顯示.
html(): 方法是獲取/設(shè)置匹配元素的html內(nèi)容。
javascript 實(shí)現(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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82928.html
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...
摘要：由兩部分組成模板起始符，稱為沉音符反引號(hào)，其內(nèi)容被識(shí)別為字符串模板。其實(shí)這是通過屬性操作中的結(jié)果，也就是說屬性將對(duì)控制符進(jìn)行轉(zhuǎn)義從而實(shí)現(xiàn)按照普通字符輸出。的語法是緊跟在后面，兩者間不能有空格或制表符等。 1. Brief ES6(ECMAScript 6th edition)于2015年7月份發(fā)布，雖然各大瀏覽器仍未全面支持ES6，但我們可以在后端通過Node.js 0.12和io....
現(xiàn)在很多都用到Tab 選項(xiàng)卡切換效果，例如點(diǎn)擊切換、滑動(dòng)切換、延遲切換、自動(dòng)切換等多種效果，本篇文章講述的就是通過原生 Jquery 來實(shí)現(xiàn) Tab 點(diǎn)擊切換的效果?！ ±纾骸 tml <body> <divstyle="position:relative;margin-top:56px;display:flex;justify-content:space...
閱讀 1136·2021-11-24 09:38
閱讀 3243·2021-11-19 09:56
閱讀 2965·2021-11-18 10:02
閱讀 735·2019-08-29 12:50
閱讀 2572·2019-08-28 18:30
閱讀 867·2019-08-28 18:10
閱讀 3675·2019-08-26 11:36
閱讀 2650·2019-08-23 18:23
