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

中

请查看下面的代码段：

＆＃13;

$('#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?


    }
});

＆＃13;

#rightchat {
	float: right;
}

span {
    border: 2px solid #000;
	padding: 10px;
	display: block;
}

p {
    border: 1px dashed #FF0000;
	padding: 10px;
}

＆＃13;

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

＆＃13;

<span>元素是一个块边框，而<p>元素有一个红色虚线边框。

如果按下Enter键并将默认文本添加到文本框中，您将看到已向页面添加了<p>元素。这意味着如果你没有逃避用户键入的内容，他们可以插入<script>，你将容易受到XSS攻击。

以下是一个关于如何使用this answer中的代码（从函数中删除）来转义字符串的示例：

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

新代码：

＆＃13;

$('#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?


    }
});

＆＃13;

#rightchat {
	float: right;
}

span {
    border: 2px solid #000;
	padding: 10px;
	display: block;
}

p {
    border: 1px dashed #FF0000;
	padding: 10px;
}

＆＃13;

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

＆＃13;

在追加数据

1 个答案: