JQuery чат добавляется <scripts>

Я создаю простое приложение для чата. Проблема, с которой я сталкиваюсь, заключается в том, что пользователи могут вставлять скрипты через чат. Очевидно, это не то, чего я хочу. A (упрощенная версия) мой код:JQuery чат добавляется <scripts>

<!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>

Предупреждение выскакивает. Любые идеи о том, как это решить?

Заранее спасибо.

источник

2016-11-16 Antonio

Я бы попытался преобразовать пунктуацию в соответствующие [HTML Escape Codes] (http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php). – Feathercrown

Вам нужно либо запретить ввод HTML на вход, так и выпадающий HTML-код или оба. Если вы добавляете HTML-контент, используя 'text()' вместо 'append()', чтобы быстро избежать HTML –

Никогда '.append()' или '.html()' любые строки ввода пользователя или вы запрашиваете XSS проблемы. Использование '.text()' - лучший выбор. – CodingWithSpike

Благодаря тому, что 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(''); 
      });

После того как я получил к этому решению я смотрел на то, что отправил Киприан Турко. Это также удается сделать трюк, но он удалил некоторые вещи. Вот почему я предпочитаю это решение.

источник

2016-11-16 18:26:01 Antonio

вам нужно на стороне клиента код и на стороне сервера код для защиты 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

источник

2016-11-16 16:50:54

Что заставляет вас предположить, что он использует PHP? Я не вижу ничего, что связано с PHP в его тегах или коде – dstarh

Я дал решение для клиентской стороны, поскольку он хочет только для клиентской стороны, не упоминал, что серверная сторона предлагает решение для php любым способом, если у него есть другой язык для серверной стороны –

JQuery чат добавляется <scripts>

ответ

Смежные вопросы