title: js - jquery : prevent input from code injection
body: <h2>Context</h2>
  
  <p>I'm creating a tiny jQuery script : By clicking on a word, user can erase it and rewrite what he wants.</p>
  
  <p>Original world is in a <code>&lt;span&gt;</code>. When clicked, the <code>&lt;span&gt;</code>is replaced by an <code>&lt;input&gt;</code>.
  no <code>&lt;form&gt;</code>, no submit button, only this <code>&lt;input&gt;</code>.</p>
  
  <h2>My problem</h2>
  
  <p>When pressing <code>enter</code> key to validate the <code>&lt;input&gt;</code>, the rest of my code works well, except for javascript injection :</p>
  
  <pre><code>&lt;input type="text" value="&lt;script&gt;alert('Evil Script')&lt;/script&gt;"&gt;
  </code></pre>
  
  <h2>My question</h2>
  
  <p>What is the best method to prevent my <code>&lt;input&gt;</code> from executing this evil script when pressing <code>enter</code> key?</p>
  
  <p>Please forgive my ingenuous question, and thank you for your advice.</p>
  
  <h2>My wrong code</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
      initNom();
  
      function initNom() {
          var nomPerso = $('#nomPerso');
          var cheminNom = localStorage.getItem('userName');
  
          montrerNom();
  
          nomPerso.on('click', function() {
              $(this).replaceWith(
                      $('&lt;input id="nomPerso" type="text" value="" placeholder="' + nomPerso.text() + '"&gt;')
              );
              $("#nomPerso")
                      .focus()
                      .on('keypress', function (e) {
                          if(e.which === 13) {
  
                              e.preventDefault();
                              //Disable textbox to prevent multiple submit
                              $(this).attr("disabled", "disabled");
  
                              sauverNom();
                              montrerNom();
  
                              $(this).replaceWith($('&lt;span id="nomPerso"&gt;' + localStorage.getItem('userName') + '&lt;/span&gt;'));
  
                              $(this).removeAttr("disabled");
  
                              initNom();
  
                          }
                      });
          });
  
          function sauverNom() {
              var nom = $('#nomPerso').val();
  
              if (typeof(Storage) !== "undefined" &amp;&amp; nom) {
                  localStorage.setItem('userName', nom);
              }
          }
  
          function montrerNom() {
              if (!cheminNom) {
                  nomPerso.text('{Inserer_nom}');
              } else {
                  nomPerso.text(cheminNom);
              }
          }
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="nomPerso"&gt;&lt;script&gt;alert('Evil Script')&lt;/script&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also on CodePen: <a href="https://codepen.io/LaBriqueHurlante/pen/mwxjRL" rel="nofollow noreferrer">https://codepen.io/LaBriqueHurlante/pen/mwxjRL</a></p>