当我附加 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

jsFiddle Demo

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

好的，现在除此之外。当您使用 console.log 时，它实际上会在参数上调用 toString() 。结果是您没有看到您的正则表达式实际上将 <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>

Answer 2

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

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

您需要从这里更改：

将用户输入放入模板
过滤 XSS 模板的输出
使用 XSS 过滤器的输出

对此：

针对 XSS 过滤每条用户输入
将过滤后的输入放入模板
使用HTML模板输出

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

When I append XSS filtered html, it prints raw html

javascript

xssf