使用 javascript 在客户端清理用户输入答案

【问题标题】：sanitize user input on client side using javascript使用 javascript 在客户端清理用户输入
【发布时间】：2019-02-21 18:11:36
【问题描述】：

我已经在我的服务器端进行了清理，任何不正确的输入文本（如<script>alert('hi')</script>）都可以正确处理。但是因为我也使用 websocket 传递数据，所以如果用户发送，这部分会被破坏

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

我找到了encodeURIComponent，但与encodeURI 混淆了，哪一个用于客户端的xss 处理？

【问题讨论】：

encodeURI() 不会编码：~!@#$&*()=:/,;?+' encodeURIComponent() 不会编码：~!*()' 现在由您决定！ .但是你真的可以信任客户端吗？
有关 XSS 清理，请查看 Yahoo 的 xss-filters 库或 DOMPurify。

标签： javascript jquery

【解决方案1】：

有关 XSS 清理，请查看 Yahoo 的 xss-filters 库或 DOMPurify。

这里是一个使用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>

【讨论】：

我用var isValid = ($('input').val().indexOf('<script'>') >-1) ? false : true; 可以吗？
不这么认为.. 假设某人写了一个例子：<script type="text/javascript">alert('hi')</script>
我知道，所以就indexOf('script')
如果有人输入：“我想制作一个新脚本”？？
则无效:P

【解决方案2】：

如果您使用HTML，那么您可以将每个字符转换为实体。

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>

【讨论】：

它也改变了字符，不需要。