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

Question

After checkmarx scan on my code,I am getting the below message.

Method execute at line 23 of ...\action\searchFun.js gets user input for the form element.

This element's value then flows through the code without being properly sanitized or validated and is eventually displayed to the user in function at line 28 of ../action/searchFun.js. This may enable a DOM XSS attack.

Could some help me how to sanitize the above scenario to satisfy Checkmarx? Script as follows:

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

You can use DOMPurify library. https://github.com/cure53/DOMPurify

This should prevent XSS injection by keeping safe HTML tags.

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

Try modifying your code to be similar to the following:

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));
        });   
    }, 
}