title: JQuery chat is appending <scripts>
body: <p>I am building a simple chat app. The issue I have encounter is that users can insert scripts through the chat. Obviously this is not something I want.
  A  (simplified version) of my code is:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="/stylesheets/style.css"/&gt;
          &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body {
                  padding-top: 80px;
                  word-wrap: break-word;
              }
          &lt;/style&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="app"&gt;
          &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              // on load of page
              $(function() {
                  // when the client clicks SEND
                  $('#datasend').click(function() {
                      console.log('enviar data');
                      var message = $('#data').val();
                      $('#conversation').append('&lt;b&gt;me:&lt;/b&gt; ' + message + '&lt;br&gt;');
                      $('#data').val('');
                  });
                  // when the client hits ENTER on their keyboard
                  $('#data').keypress(function(e) {
                      if (e.which == 13) {
                          $(this).blur();
                          $('#datasend').focus().click();
                      }
                  });
              });
          &lt;/script&gt;
          &lt;script src="scripts/locate.js"&gt;&lt;/script&gt;
          &lt;div class="container" ng-controller="userController"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div class="well"&gt;
                          &lt;h3&gt;
                              &lt;span class="fa fa-comment"&gt;&lt;/span&gt;
                              Chat&lt;/h3&gt;
                          &lt;div&gt;
                              &lt;div id="conversation"&gt;&lt;/div&gt;
                              &lt;input id="data" style="width:200px;"/&gt;
                              &lt;input type="button" id="datasend" value="send"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For example, if an user inserts this text:</p>
  
  <pre><code>    &lt;script&gt; alert('big problem') &lt;/script&gt;
  </code></pre>
  
  <p>An alert pops up. Any ideas of how to solve this?</p>
  
  <p>Thanks in advance.</p>