nettoyer l'entrée de l'utilisateur du côté client en utilisant javascript

Question

Je m'occupe déjà de l'assainissement du côté serveur, toute entrée de texte incorrecte comme <script>alert('hi')</script> peuvent être traitées correctement. Mais parce que je transmets également des données en utilisant websocket, cette partie est cassée si l'utilisateur envoie

<script>alert('hi')</script>

J'ai trouvé le composant encodeURIC mais j'ai confondu avec encodeURI, lequel est destiné à la gestion du xss du côté client ?

Answer 1

Pour la neutralisation des XSS, consultez le site de Yahoo. xss-filtres bibliothèque ou à DOMPurify .

Voici un exemple utilisant DOMPurify :

var input = document.getElementById('input'),
    result = document.getElementById('result'),
    button = document.getElementById('button').addEventListener('click', function(){
      // Sanitize
      var clean = DOMPurify.sanitize(input.value, {SAFE_FOR_TEMPLATES: true});

      result.innerHTML = clean;
      console.log(clean);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.8.4/purify.min.js"></script>

<input type="text" id="input"> 
<button id="button">Send</button>
<p id="result"></p>

Answer 2

Si vous utilisez HTML alors vous pouvez convertir tous les caractères en entités.

function sanitize(a) {
  var b = "";
  for (var i = 0; i < a.length; i++) {
    b += "&#x"+a.charCodeAt(i).toString(16)+";"
  }
  return b;
}

User Input:
<input type="textbox" id="box">
<input type="button" value="Sanitize to entities" onclick="document.getElementById('sanitizedfield').innerText=(sanitize(document.getElementById('box').value))"><pre id="sanitizedfield"></pre>