javascript - ajax response return html response (XSS veracode)

Question

function viewAcc() {
    var errorMsg = "";
    var result = true;
    $(".errorView").hide();
    var accNum = document.getElementById('custAccNum').value;
    var accType = document.getElementById('custAccType').value;
    $("#overlayPopup").show();
    $.ajax({
        url : '<attribute:resourceURL/>',
        data : {
            "custNo" : accNum ,
            "custType" : accType 
        },
        success : function(data) {
            if (data == 'CUS_ACC') {
                window.location = "/cust/account/c";
            } else {
                $("#overlayPopup").hide();
                //display warning
                $(".errorView").show();
                $(".errorView").html(data); // <--- XSS line
                e.preventDefault();
            }
        },
        cache : false,
        dataType : 'text',
        error : function(error, textStatus, errorThrown) {
            alert('error in ajax call: ' + textStatus);
            console.log('error in ajax call: ' + textStatus);
            window.location = "/cust/account/c/lookup";
        },
        timeout : ajaxTimeOutMilliSeconds
    });

}

So the veracode point out says I have issue on $(".errorView").html(data); How do I fix this? If I just make it to text will it show on the client as is with the html?

Answer 1

You can simply use .text() instead of .html(). If you don't have any markup coming from the server, then this is a perfectly viable alternative, since .text() will prevent the content being interpreted as HTML

//doing sc+ript is only needed here because Stack Snippets otherwise throws an error.
var msg = "This is <b>a message</b> with <script>console.log('some code')</sc"+"ript>";
$("#msgHtml").html(msg);
$("#msgText").text(msg);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Message via .html():</h3>
<div id="msgHtml"></div>

<h3>Message via .text():</h3>
<div id="msgText"></div>