Question

我正在构建一个简单的聊天应用。我遇到的问题是用户可以通过聊天插入脚本。显然这不是我想要的。我的代码的（简化版）是：

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="/stylesheets/style.css"/>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            body {
                padding-top: 80px;
                word-wrap: break-word;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="app">
        <script src="/socket.io/socket.io.js"></script>
        <script>
            // on load of page
            $(function() {
                // when the client clicks SEND
                $('#datasend').click(function() {
                    console.log('enviar data');
                    var message = $('#data').val();
                    $('#conversation').append('<b>me:</b> ' + message + '<br>');
                    $('#data').val('');
                });
                // when the client hits ENTER on their keyboard
                $('#data').keypress(function(e) {
                    if (e.which == 13) {
                        $(this).blur();
                        $('#datasend').focus().click();
                    }
                });
            });
        </script>
        <script src="scripts/locate.js"></script>
        <div class="container" ng-controller="userController">
            <div class="row">
                <div class="col-sm-12">
                    <div class="well">
                        <h3>
                            <span class="fa fa-comment"></span>
                            Chat</h3>
                        <div>
                            <div id="conversation"></div>
                            <input id="data" style="width:200px;"/>
                            <input type="button" id="datasend" value="send"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

例如，如果用户插入此文本：

    <script> alert('big problem') </script>

弹出警告。有关如何解决这个问题的想法吗？

提前致谢。

Answer 1

您需要客户端代码和服务器端代码来保护XSS 至于cleint代码，你可以使用这个函数

  function strip_tags (input, allowed) {


  allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('')

 var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi
 var commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi

 return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
   return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : ''
 })
}

用法：

var message = $('#data').val();
  message= strip_tags(message, '<br><br/><br />');
 $('#conversation').append('<b>me:</b> ' + message + '<br>');

你也可以在服务器端使用php strip_tags函数

string strip_tags ( string $str [, string $allowable_tags ] )

更多信息 http://php.net/manual/ru/function.strip-tags.php

Answer 2

感谢CodingWithSpike发表的评论，我设法找到了这个解决方案：

            // when the client clicks SEND
            $('#datasend').click(function() {
                console.log('enviar data');
                var message = $('#data').val();
                text = $('<span></span>').text(message);
                user = $('<b> </b>').text('me: ');
                div = $('<div> </div>');
                div = div.append(user);
                div = div.append(text);
                $('#conversation').append(message);
                $('#data').val('');
            });

在我得到这个解决方案之后，我看了一下Ciprian Turco发布的内容。它也设法做到这一点，但它删除了一些东西。这就是为什么我更喜欢这个解决方案。

JQuery聊天附加了<scripts>

2 个答案: