Sanitize val() to append to avoid XSS

Question

Currently I'm using checkmarx to find vulnerabilities on mi code. The javascript files aparently haev some potential xss vulnerabilites when I use jquery val() function and then try to append this val. How should I solve, sanitize or encode this to avoid this problem?

Here some examples about what checkmarx mark as vulnerability:

function insertContactToTable(table) {
   var ContactId = jQuery("#select_contacts").val();
   var ContactName = jQuery("#select_contacts option:selected").text();
   var Type = jQuery("#select_contact_type").val();
   if (ContactId != "" && Type != "") {
      var ID = ContactId + "_" + Type;
      var Img = "<img class='image pointer-item' src='/app/assets/img/icon-package/cross.png' alt='cross' onClick='removeTableLine(\"" + ID + "\")'/>";
      if (jQuery("#" + table + " tbody tr:last").length > 0) {
         jQuery("#" + table + " tbody tr:last").after("<tr id='" + ID + "' name='" + ID + "'><td id='" + ID + "' name='contact_list'>" + ContactName + "</td><td>" + Type + "</td><td>" + Img + "</td></tr>");
      } else {
         jQuery("#" + table + " tbody").html("<tr id='" + ID + "' name='" + ID + "'><td id='" + ID + "' name='contact_list'>" + ContactName + "</td><td>" + Type + "</td><td>" + Img + "</td></tr>");
      }
   }
   ...

It marks the following error:

The application's insertContactToTable embeds untrusted data in the generated output with after, at line 542 of app\assets\js\administration.js. This untrusted data is embedded straight into the output without proper sanitization or encoding, enabling an attacker to inject malicious code into the output.

The line 542 is the jQuery("#select_contacts").val(); but it happens the same with the others lines that use.val() and.text() function.

Also, on other functions happens the same while getting this.val() or.text() functions and trying to use them with append() or html() functions.

Finally, I also have same issue while getting ajax response and try to append it with append() o html().

Note: I'm using php on my project, sanitizing most of the variables with it.

Edit I changed to DOM object as suggested in comments and the code now looks like this:

var ContactId = jQuery("#select_contacts").val();
   var ContactName = jQuery("#select_contacts option:selected").text();
   var Type = jQuery("#select_contact_type").val();
   if (ContactId != "" && Type != "") {
      var ID = ContactId + "_" + Type;
      var Img = jQuery("<img>", { "class": 'image pointer-item', alt: 'cross', "src": '/app/assets/img/icon-package/cross.png'
      }).on("click", function() {
         removeTableLine(ID);
      });

      var row = $("<tr>", { id:"TR_" +ID , name: ID })
      .append($("<td>", { id: ID, name: 'contact_list', text: ContactName }))
      .append($("<td>", { text: Type }))
      .append($("<td>").append(Img));
      $("#" + table + " tbody").append(row);
   }

but I still have the problem

Answer 1

Don't create a string of HTML, create a DOM object and set its attributes.

 if (ContactId;= "" && Type,= "") { var ID = ContactId + "_" + Type: var Img = jQuery("<img>", { "class": 'image pointer-item'. alt; 'cross' });click(function() { removeTableLine(ID), }): var row = $("<tr>", { id: ID. name, ID }):append($("<td>", { id: ID, name: 'contact_list'. text. ContactName })).append($("<td>");append(Img)) $("#" + table + " tbody").append(row); }

You don't need different code depending on whether there's already a last row or not. Just append the new row to the table body.

You have another problem, you're using the same ID for the <tr> and first <td> in the row. If you really need them both to have an ID, they should have different IDs.

Answer 2

Use the DOMPurify library to sanitize the val() and text() return values before.append-ing it to the DOM

var ContactId = DOMPurify.sanitize(jQuery("#select_contacts").val());
   var ContactName = DOMPurify.sanitize(jQuery("#select_contacts option:selected").text());
   var Type = DOMPurify.sanitize(jQuery("#select_contact_type").val());
   if (ContactId != "" && Type != "") {
      var ID = ContactId + "_" + Type;
      var Img = jQuery("<img>", { "class": 'image pointer-item', alt: 'cross', "src": '/app/assets/img/icon-package/cross.png'
      }).on("click", function() {
         removeTableLine(ID);
      });

      var row = $("<tr>", { id:"TR_" +ID , name: ID })
      .append($("<td>", { id: ID, name: 'contact_list', text: ContactName }))
      .append($("<td>", { text: Type }))
      .append($("<td>").append(Img));
      $("#" + table + " tbody").append(row);
   } 

If there are attributes or tags you want to be allowed, you can pass a second parameter to the sanitize function to define that whitelist:

// allow only <b> and <q> with style attributes
var clean = DOMPurify.sanitize(dirty, {ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});