XSS issue in the angularjs application

Question

This is regarding injecting the script tag (given below) in one of the input and it's description field. Values are saving fine and showing in the grid.

Go to this <script>window.alert('abc')</script> and fill out the FAFSA.

Form fields:-

You can see in the below screenshot that the alert script is running from the description field.

Modal implementation (execute on click of the document type link in the listing):-

  $rootScope.showNormalModal = function (message) {
        var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" +
            "<span aria-hidden='true'>×</span></button> " +
            "<h4 class='modal-title' id='myModalLabel'><div>" +
            "</div>" + message + "</h4></div>";

        var modalInstance = $modal.open({
            template: modalHtml,
            controller: function ($scope, $modalInstance) {
                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }
        });
    }
});

If the input parameter has script tag with some operation, it is not showing in the UI as it is, instead the script is running before the modal.

Expected behavior here is when I clicked on the anchor in the listing, it should show its description in the popup. what is happening here is, before showing the description, I am getting a alert window because of the script tag injection.

How will I avoid the alert script getting executed before the popup.

Attached all the screenshots below.

Listing Page :-

Alert Window :-

Description Popup :-

Thanks in advance.

Do you use some standard/public component? (please names, links)? Otherwise the answer will be as broad as your question: "Do sanitize" — 2oppin
– 2oppin, Commented Dec 20, 2017 at 7:12
Sanitize html content. docs.angularjs.org/api/ngSanitize/service/$sanitize — Ashish
– Ashish, Commented Dec 20, 2017 at 7:24
Building HTML via string concatenation with user provided content should always set off big flashing XSS VULNERABILITY warning lights in your brain - if you can refactor your code to not do that, I'd highly recommend it. Otherwise, $sanitize it. — Joe Clay
– Joe Clay, Commented Dec 20, 2017 at 11:21
added more details. @Ashish - can you explain how will implement sanitize in the above example — Sarun UK
– Sarun UK, Commented Dec 20, 2017 at 11:22

Sarun UK · Accepted Answer · 2017-12-20 17:08:54Z

1

Can you please try below code

$rootScope.showNormalModal = function (message) {
  var modalHtml = "<div class='modal-header'><button type='button' ng-click='cancel()' class='close' data-dismiss='modal' aria-label='Close'>" +
    "<span aria-hidden='true'>×</span></button> " +
    "<h4 class='modal-title' id='myModalLabel'><div>" +
    "</div><div ng-bind=\"message\"></div></h4></div>";

  var modalInstance = $modal.open({
    template: modalHtml,
    controller: function ($scope, $modalInstance, message) {
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
      $scope.message = message;
    },
    resolve: {
      message: function () {
        return message;
      }
    }
  });
}

edited Dec 20, 2017 at 17:08

Sarun UK

6,7667 gold badges26 silver badges52 bronze badges

answered Dec 20, 2017 at 16:22

Ashish

1,1218 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rathma Over a year ago

it would be very helpful to add a little description for future readers.

DariusVE Over a year ago

The trick on the code is the use of the ng-bind, that will help doing some basic content sanitation. also you can use docs.angularjs.org/api/ngSanitize/service/$sanitize

Collectives™ on Stack Overflow

XSS issue in the angularjs application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related