如何防止javascript中的客戶端DOM XSS漏洞？

Question

對我的代碼進行 checkmarx 掃描后，我收到以下消息。

在 ...\action\searchFun.js 的第 23 行執行的方法獲取表單元素的用戶輸入。

然后，該元素的值在未經過適當清理或驗證的情況下流經代碼，並最終在 ../action/searchFun.js 的第 28 行的函數中顯示給用戶。 這可能會啟用 DOM XSS 攻擊。

有人可以幫助我如何清理上述場景以滿足 Checkmarx 的要求嗎？ 腳本如下：

function searchAnnouncements(){
  $('#loadingAnnouncements').html('Loading...');
  var formData = $('form').serialize();

  jQuery.ajax({
    type: "post",
    url:  "bat.ajax",
    data: formData,
    cache: false,
    dataType: "json",
    cache: false,
    success: function(json) {
      $('div.block').unblock();
      $('#loadingAnnouncements').html('');
      if (json.resultSize > 0)
        $('#searchResults').html(json.searchResult);
    });
  },
}

Answer 1

您可以使用DOMPurify庫。 https://github.com/cure53/DOMPurify

這應該通過保持安全的 HTML 標簽來防止 XSS 注入。

function searchAnnouncements(){
  $('#loadingAnnouncements').html('Loading...');
  var formData = $('form').serialize();

  jQuery.ajax({
    type: "post",
    url:  "bat.ajax",
    data: formData,
    cache: false,
    dataType: "json",
    cache: false,
    success: function(json) {
      $('div.block').unblock();
      $('#loadingAnnouncements').html('');
      if (json.resultSize > 0)
        $('#searchResults').html(DOMPurify.sanitize(json.searchResult));
    });
  },
}

Answer 2

嘗試將您的代碼修改為類似於以下內容：

function searchAnnouncements(){  
    $("#loadingAnnouncements").html("Loading...");
    var formData = $("#form").serialize();

    jQuery.ajax({
        type: "post",
        url:  "bat.ajax",
        data: formData,
        cache: false,
        dataType: "json",
        cache: false,
        success: function(json) {
            $("#div.block").unblock();
            $("#loadingAnnouncements").html('');
            if (json.resultSize > 0)
              $("#searchResults").html(DOMPurify.sanitize(json.searchResult));
        });   
    }, 
}