Wenn ich XSS gefiltert html anhängen, druckt er raw html

Question

Hier XSS Filterung JavaScript-Code

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

und hängen Quelle unter

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

Wenn ich diese anhängen, es nicht <b>HTML</b> anhängen, es hängt stattdessen <b>string</b> an.

Was ich will: img+nick+msg

Ergebnis: <div class="msg_box" ....

Jede Lösung zu diesem Problem?

Answer 1

jsFiddle Demo

Zuerst Uncaught ReferenceError: XSSFilter is not defined. Sie müssen sicherstellen, dass der Funktionsname mit Ihrem Anruf übereinstimmt. Entweder ändern Sie den Funktionsnamen zu XSSFilter oder rufen Sie es mit XSSfilter an - ich würde ersteres annehmen.

Okay, jetzt darüber hinaus. Wenn Sie console.log verwenden, wird es tatsächlich toString() auf dem Argument aufrufen. Das Ergebnis ist, dass Sie nicht sehen, dass Ihre Regex tatsächlich die <div> in <div> konvertiert, die kein gültiger HTML-Code ist und als Ergebnis von jQuery als String angehängt wird.

Der beste Ansatz wäre, nur den Teil zu filtern, die eingegeben werden (der Nick und die Meldung).

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

Die Standardmethode für XSS zu filtern, und der Ansatz, den Sie zu nehmen versuchen, ist auf eine Benutzereingabe als Klartext und wandeln es in eine HTML-Darstellung des Textes zu behandeln .

Ihr Problem besteht darin, dass Sie Benutzereingaben nehmen, sie in Ihre Vorlage einfügen und dann das Ergebnis über den XSS-Filter weiterleiten ... aber die Ausgabe der Vorlage soll HTML sein, kein einfacher Text.

Sie müssen sich das ändern:

1. Put Benutzereingaben in Vorlage
2. Filter Ausgabe der Vorlage für XSS
3. Verwenden Ausgabe von XSS

zu diesem Filter:

1. Filter jedes Stück von Benutzereingaben für XS S
2. Put gefilterten Eingangs in Vorlage
3. Verwendung der HTML-Ausgabe der Vorlage