CWE 80: Cross-Site Scripting (XSS) - Jquery.append();

Question

User135423268 posted

Good Day Everyone

I have scanned my application using Veracode and I have High findings the which is CWE 80: Cross-Site Scripting

When I check the code, it points out on this code.

$('#table-employee-list tbody').empty();
    var listusr = $('#table-employee-list');
    $.ajax({
        url: '/api/MYAPI/LoadEmployees',
        type: 'GET',
        contentType: 'application/json charset=utf-8',
        dataType: 'json',
        success: function (data) {

            $.each(data, function (i, item) {

                var row = '';
                var settblcmd;
                settblcmd = '<button type="button" id="row-command" class="btn btn--primary my-table-btn" onclick="createUser(this)" title="Create User">Create User</button>'
                
                row += '<tr>'
                    + '<td>' + item.employeeID + '</td>'
                    + '<td>' + item.fullName + '</td>'
                    + '<td>' + item.position + '</td>'
                    + '<td>' + item.dept + '</td>'
                    + '<td>' + item.active + '</td>'
                    + '<td>' + settblcmd + '</td>'
                    + '</tr>'
                $('#table-employee-list tbody').append(row);
            });


            $('#modal-prog-bar').modal('hide');
        },
        error: function (xhr) {
            var getxhr = $.parseJSON(xhr.responseText);
            $('#modal-alert').modal({ backdrop: 'static', keyboard: false });
            $('#modal-alert-header-title').text("eApps Admin - Error");
            $('#alert-message').html(getxhr.message);
            $('#close-alert-message').attr('onclick', "$('#modal-alert').modal('hide')");
            return;
        }
    });

It points on the $('#table-employee-list tbody').append(row);

Is there other way to fix this? I have read some of the forums, they always telling that it should be requested for mitigate by design, is this the better fix or there are other ways to fix this?

Thanks everyone, regards.

Answer 1

User-939850651 posted

Hi amendoza29,

When untrusted users submit data to be used to update the DOM, or use insecure JS interface, there will be such a problem.

Its data source can come from the DOM, or sent from the server side (via an AJAX call, or a page load), and the final source can come from the request, or from the storage location of the server or the client.

Depending on your situation, I think you may need to transcode. For more details, you could refer to this document below:

https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html

Best regards,

Xudong Peng

Answer 2

User-1545767719 posted

I suggest that you use an html-escape for the item.employeeID, item.fullName, item.position, item.dept and item.active if the data obtained from the url "/api/MYAPI/LoadEmployees" can contain a input form untrusted users.

For example, define an escaping method such like:

function htmlEscape(str) {
    if (!str) return;
    return str.replace(/[<>&"'`]/g, function(match) {
      const escape = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
        '"': '&quot;',
        "'": '&#39;',
        '`': '&#x60;'
      };
      return escape[match];
    });
}

and use the above method as follows:

row += '<tr>'
       + '<td>' + htmlEscape(item.employeeID) + '</td>'
       ...