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

Question

这里是XSS过滤JavaScript代码

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

并在下方附加源

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));}

当我追加这个时，它不会追加<b>HTML</b>，而是追加<b>string</b>。

我想要的：img+nick+msg

结果：<div class="msg_box" ....

这个问题有什么解决办法吗？

Answer 1

XSS过滤的标准方法以及您尝试采用的方法是将用户输入视为纯文本，并将其转换为该文本的HTML表示形式。

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

您需要从此更改：

1. 将用户输入放入模板
2. XSS模板的筛选器输出
3. 使用XSS滤波器的输出

到此：

1. 过滤XSS的每一条用户输入
2. 将筛选后的输入放入模板
3. 使用模板的HTML输出

Answer 2

jsFiddle Demo

首先，Uncaught ReferenceError: XSSFilter is not defined。您需要确保函数名称与您的调用相匹配。要么将函数名更改为XSSFilter，要么用XSSfilter调用它——我假设是前者。

好吧，现在就到此为止。当您使用console.log时，它实际上会对参数调用toString()。结果是，您没有看到您的regex实际上正在将<div>转换为<div>，这是无效的html，因此jQuery将其附加为字符串。

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

var XSSFilter = function( content ) {
return content.replace(/</g, "&lt;").replace(/>/g, "&gt;");
};
function send_msg(nick, msg) {
  nick = XSSFilter(nick);
  msg = XSSFilter(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(html);
}
send_msg('nick','msg');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messages">
</div>