html&单词,javascript && jQuery 实现html转义

背景：

做快站项目遇到的一个bug，一图胜千言，bug如下图：

这个问题只在某些帐号下出现，绝大数其他帐号都是正常的，正常情况下是这个样子的：

为啥会因帐号而已呢？猜测是因为前端渲染模板所用的数据惹得祸 :(

分析

查看DOM结构：

正常情况下，蓝框内的所有li标签应该都在红筐内。

再看渲染模板用的数据：

果然，数据里面含有html标签，可我在渲染模板之前没有做转义处理，恩，XSS攻击就是这么来的。

解决方案

jQuery 实现html转义

function htmlEncode(value){

return $("

}

//Html解码获取Html实体

function htmlDecode(value){

return $("

}

借助text()和html()函数来转译html

text() : 方法获取/设置的是匹配元素的文本内容，且会将HTML中的预留字符(如大于号(>))转换成html字符实体，以便于正确显示.

html(): 方法是获取/设置匹配元素的html内容。

javascript 实现html转译

//编码

function html_encode(str)

{

var s = "";

if (str.length == 0) return "";

s = str.replace(/&/g, ">");

s = s.replace(/

s = s.replace(/>/g, ">");

s = s.replace(/ /g, " ");

s = s.replace(/\"/g, """);

s = s.replace(/\"/g, """);

s = s.replace(/\n/g, "
");

return s;

}

//解码

function html_decode(str)

{

var s = "";

if (str.length == 0) return "";

s = str.replace(/>/g, "&");

s = s.replace(/

s = s.replace(/>/g, ">");

s = s.replace(/ /g, " ");

s = s.replace(/"/g, "\"");

s = s.replace(/"/g, "\"");

s = s.replace(/
/g, "\n");

return s;

}