在追加数据之前我需要转义吗

Question

我对未来的聊天系统有一些简单的jquery，我想知道它是否容易受到XSS攻击？在追加用户输入内容之前，我是否需要在此示例中转义某些内容？

$("#textareadiv").on('keypress', function(e) { 
var keyCode = (window.event) ? e.which : e.keyCode; 

if(e.keyCode==13){ 
    e.preventDefault(); 

    var text2 = $("#textareadiv"); 
    var s = '<span class=right>'+text2+'</span>'; // can I just append this? 

    $('#rightchat').append(s); // can I just append this? 


} 
}); 

Answer 1

我把你的代码在一个JSFiddle

看看下面的代码片段：

$('#textareadiv').val('<p>I am a "p" element </p>') 
 

 
$("#textareadiv").on('keypress', function(e) { 
 
    var keyCode = (window.event) ? e.which : e.keyCode; 
 

 
    if (e.keyCode == 13) { 
 
     e.preventDefault(); 
 

 
     var text2 = $("#textareadiv").val(); 
 
     var s = '<span class=right>' + text2 + '</span>'; // can I just append this? 
 

 
     $('#rightchat').append(s); // can I just append this? 
 

 

 
    } 
 
});

#rightchat { 
 
\t float: right; 
 
} 
 

 
span { 
 
    border: 2px solid #000; 
 
\t padding: 10px; 
 
\t display: block; 
 
} 
 

 
p { 
 
    border: 1px dashed #FF0000; 
 
\t padding: 10px; 
 
}

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

 
<div id="rightchat"></div>

的<span>元素ahve像块边界，而<p>元素有一个红色的虚线边框。

如果按回车并将默认文本添加到文本框中，您会看到<p>元素已添加到页面中。这意味着如果你不逃避用户输入的内容，他们可以插入<script>，你将很容易受到XSS攻击。

---

下面是如何逃脱的串，利用从this answer代码（从功能上除去）的示例：

var escape = document.createElement('textarea'); 
escape.textContent = text2; 
text2 = escape.innerHTML; 

新的代码：

$('#textareadiv').val('<p>I am a "p" element </p>') 
 

 
$("#textareadiv").on('keypress', function(e) { 
 
    var keyCode = (window.event) ? e.which : e.keyCode; 
 

 
    if (e.keyCode == 13) { 
 
     e.preventDefault(); 
 
     var text2 = $("#textareadiv").val() 
 
     
 
     // Code to escape HTML code 
 
     var escape = document.createElement('textarea'); 
 
     escape.textContent = text2; 
 
     text2 = escape.innerHTML; 
 
     
 
     var s = '<span class=right>' + text2 + '</span>'; // can I just append this? 
 

 
     $('#rightchat').append(s); // can I just append this? 
 

 

 
    } 
 
});

#rightchat { 
 
\t float: right; 
 
} 
 

 
span { 
 
    border: 2px solid #000; 
 
\t padding: 10px; 
 
\t display: block; 
 
} 
 

 
p { 
 
    border: 1px dashed #FF0000; 
 
\t padding: 10px; 
 
}

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

 
<div id="rightchat"></div>