Когда я добавляю XSS Filtered 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 не простым текстом.

Вы должны изменить из этого:

1. Put пользовательский ввод в шаблон
2. фильтр вывода шаблона для XSS
3. Используйте выход XSS фильтр

к этому:

1. Отфильтровать каждую часть пользовательского ввода для XS S
2. Put фильтруется вход в шаблон
3. Использование HTML вывода шаблона