Question

We have an action on our controller that returns a json result with an id and a name. We then take that and do this..

    var markup = '';
    for(var i = 0; i < data.length; i++) {
        markup += '<option value="' + data[i].id + '">' + data[i].agentName + '</option>';
    }

    $("#agentId").html(markup);

The + data[i].agentName + opens us up to an xss attack so I’m trying to figure out the best way to handle this scenario.

So far my "best" option seems to be to see if I can use the AntiXss library on the server side and encode the agentName before I return it. I say "best" because (as of 5/14/2012) the AntiXss library is getting a lot of hate so I’m not in love with the idea of using it.

Any other options?

Update

<select id="agentId"></select>

Is how I build the select element I’m going to be adding to..

Answer 1

You should build DOM elements using jQuery and call text():

$("#agentId").empty().append($.map(data, function(obj) {
    return $('<option />').val(obj.id).text(obj.agentName)[0];
}));