XSS attacks on JQuery /angular data-tables

moningisridhar

Friends, I am getting script tags from api response. The data I am getting from response is displayed in tabular format using angular/jquery data-tables. As the api response is having script tags, alerts are fired at front-end on loading the page.

Please help me, how to prevent alerts, and showing the page as it is(same as, getting in the response) at the FE using datatables.

Below are my code snippets:

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(function() {

        return alertsService.getAlerts('true').then(function(data) {
            return data;
        });
    })
    .withPaginationType('simple')
    .withOption('bFilter', false)
    .withOption('bAutoWidth', true)
    .withLanguage({
        "sEmptyTable":     "No data available in table",
        "sInfo":           "Showing _START_ to _END_ of _TOTAL_",
        "sInfoEmpty":      "Showing 0 to 0 of 0",
        "sLengthMenu":     "View _MENU_",
        "sLoadingRecords": "Loading...",
        "sZeroRecords":    "No matching records found",
        "oPaginate": {
            "sNext":     "<button class='btn btn-default pull-right'><i class='fa fa-angle-right'></i></button>",
            "sPrevious": "<button class='btn btn-default'><i class='fa fa-angle-left'></i></button>"
        },
        "oAria": {
            "sSortAscending":  ": activate to sort column ascending",
            "sSortDescending": ": activate to sort column descending"
        }
    })
    .withOption('sDom', '<"top">rt<"clearfix"><"pull-left"l><"text-right"pfi><"clear">')
    .withOption('responsive', true);

$scope.dtColumns = [
    DTColumnBuilder.newColumn(null).withTitle('Date/Time')
        .renderWith(function(data, type, full, meta) {
            return $filter('date')(data.updated_at, 'yyyy-MM-dd')
        }),
    DTColumnBuilder.newColumn(null).withTitle('Alert Text')
        .renderWith(function(data, type, full, meta) {
            return '<a href="/alert-details/id/' + data.id + '/component/' + data.component_id + '">' + data.alert_text + '</a>'

        }),
    DTColumnBuilder.newColumn('device_identity').withTitle('Identity'),
    DTColumnBuilder.newColumn('component_type').withTitle('Component'),
    DTColumnBuilder.newColumn('fixed_by_username').withTitle('Fixed By'),

DTColumnBuilder.newColumn('comments').withTitle('Comments')
];
alerts.view.html

Alerts

json response

{
alert_text:"Message board hello alert("XSS")
has left its geofence."
comments : null
component_id : 5
component_type:"MessageBoard"
created_at:"2017-10-27T11:46:28.000Z"
device_identity:"hello <script>alert("XSS")</script>"
emails:null
fixed_by_user_id:null
fixed_by_username:null
id:5
limit_id:null
limit_type:null
phones:null
telemetry_id:null
telemetry_type:null
updated_at:"2017-10-27T11:46:28.000Z"
users:null
}
Friends, please help. Got stuck with it from past one week. Thanks a lot in advance!!

allan

Have you read the manual page on XSS security? The key thing to do is to use the text renderer if you can't trust the data source.

Allan