Question

我遇到了设置转义字符串和清理从服务器发送到客户端的数据的正确方法的问题。

我已经尝试过Javascript中内置的encodeURI函数，但是我的聊天中的名称看起来很笨拙，其中包含％等。

function sendChat(data){
  var message = `<div class="message flex">
    <div class="image flex flex-v flex-h">
      <img src="${ data.avatar }">
    </div>

    <div class="content">
      <div class="name flex">
        <div>
          ${ data.username }
        </div>

        <div class="level">
          ${ data.level }
        </div>
      </div>

      <div class="text">
        ${ data.message }
      </div>
    </div>
  </div>`;

  $('.chat .box').append(message);
 }

每当用户将Alert（'hi'）作为文本消息放入时，显然将其发送到客户端并转换为适当的js，但是为了防止这种情况，我想在不显得时髦的情况下对数据进行清理有任何适当的功能可以使用，因此我仍然可以安全地清理数据而不会显得很破旧。

Answer 1

使用此

var StrippedString = OriginalString.replace（/（<（[[^>] +）>）/ ig，“”）;

Answer 2

我最终使用了

String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};

在前端清理数据。

在Fastest method to escape HTML tags as HTML entities?下找到了答案

Answer 3

一种非常安全的方法是在jquery中构建消息，因为您已经在使用它了，就像这样（只是一个简单的草图-我事先为可读性表示歉意）：

 function sendChat(data) {

    var image = $('<img></img>').attr('src', data.avatar);
    var imageContainer = $('<div></div>').addClass('iange flex flex-v flex-h').append(image)
    var username = $('<div></div>').text(data.username);
    var level = $('<div></div>').text(data.level);
    var name = $('<div></div>').addClass('name flex').append(username).append(level);
    var text = $('<div></div>').text(data.message);
    var content = $('<div></div>').addClass('content').append(name).append(text)


    var message = $('<div></div>').addClass('message flex')
        .append(imageContainer).append(content);
    $('.chat .box').append(message);
}

虽然它的可读性较差，但它的安全性稍高一些，因为您不必重新发明清理方法，而使用经过时间考验的jquery实现。例如，在您的代码中，攻击者可能仍然可以说服系统其头像为：

来劫持头像的src属性：

;\" onerror=\"\alert('hi')"

然而，最好的解决方案是使用模板引擎，因为它们会为您清理它并同时可读。使用mustache.js的示例：

function sendChatMustache(data) {
    var message = 
         `<div class="message flex">
            <div class="image flex flex-v flex-h">
              <img src="{{avatar}}">
            </div>

            <div class="content">
              <div class="name flex">
                <div>
                  {{username}}
                </div>

                <div class="level">
                  {{level}}
                </div>
              </div>

              <div class="text">
                {{message}}
              </div>
            </div>
          </div>`;

    var html = Mustache.to_html(message, data);

    $('.chat .box').append(html);
}

清理数据以防止XSS

3 个答案: