Javascript 当我附加XSS过滤html时，它会打印原始html

下面是XSS过滤JavaScript代码

var XSSfilter = function( content ) {
return content.replace(/</g, "&lt;").replace(/>/g, "&gt;");};

var XSSfilter=函数（内容）{
返回内容。replace（//g，“”；}；

并在下面添加源代码

function send_msg(nick, msg) {
var html = '<div class="msg_box"><img class="profile-pic" src="http://i.imgur.com/.jpg">
<div class="user_name_chat">{NAME}</div>
<div class="text">{MESSAGE}</div><div class="clear"></div>';
var append = html.replace('{NAME}', nick);
html = append.replace('{MESSAGE}', msg);
console.log(html);
$('#messages').append(XSSFilter(html));}

函数发送消息（尼克，消息）{
var html='1〕
{NAME}
{MESSAGE}'；
var append=html.replace（'{NAME}'，nick）；
html=append.replace（{MESSAGE}'，msg）；
log（html）；
$（“#消息”）.append（XSSFilter（html））；}

当我附加这个时，它不会附加

HTML

，而是附加

string

我想要的：

img+nick+msg

结果：

首先，
未捕获引用错误：未定义XSSFilter
。您需要确保函数名与调用匹配。要么将函数名更改为
XSSFilter
，要么使用
XSSFilter
调用它——我将假定为前者

好了，除此之外。当您使用
console.log
时，它实际上会对参数调用
toString（）
。结果是，您没有看到您的正则表达式实际上正在将
转换为
div
，这是无效的html，因此jQuery将其作为字符串追加

最好的方法是只过滤正在输入的部分（尼克和消息）


var XSSFilter=函数（内容）{
返回内容。替换（//g，“”）；
};
函数发送消息（尼克，消息）{
尼克=XSSFilter（尼克）；
msg=XSSFilter（msg）；
var html='{NAME}{MESSAGE}'；
var append=html.replace（'{NAME}'，nick）；
html=append.replace（{MESSAGE}'，msg）；
log（html）；
$（'#messages'）.append（html）；
}
发送消息（“尼克”，“消息”）
过滤XSS的标准方法和您尝试采用的方法是将用户输入视为纯文本，并将其转换为该文本的HTML表示形式

您的问题是，您正在获取用户输入，将其放入模板中，然后将结果通过XSS过滤器传递……但是模板的输出应该是HTML而不是纯文本

您需要对此进行更改：

将用户输入放入模板中
XSS模板的筛选输出
使用XSS过滤器的输出
为此：

过滤XSS的每个用户输入
将筛选后的输入放入模板
使用模板的HTML输出
你为什么期望
img+nick+msg
？