XSS-Problem in der angularjs-Anwendung

Question

Dies ist in Bezug auf die Injektion der Skript-Tag (siehe unten) in einem der Eingabe und Beschreibung. Die Werte werden gut gespeichert und im Raster angezeigt.

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

Formularfelder: -

Sie im Screenshot unten sehen kann, dass die Warnung Skript aus dem Beschreibungsfeld ausgeführt wird.

Modal-Implementierung (auf Klick auf den Link in der Liste Dokumenttyp ausführen): -

$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'); 
       }; 
      } 
     }); 
    } 
}); 

Wenn der Eingangsparameter Script-Tag mit einigem Betrieb hat, wird in der Benutzeroberfläche, da es nicht zeigt ist, stattdessen läuft das Skript vor dem Modal.

Erwartete Verhalten hier ist, wenn ich auf den Anker in der Auflistung geklickt hat, sollte es seine Beschreibung im Popup anzeigen. Was hier passiert, ist, bevor ich die Beschreibung zeige, bekomme ich ein Alarmfenster wegen der Script-Tag-Injektion.

Wie vermeide ich, dass das Alarmskript vor dem Popup ausgeführt wird.

Alle Screenshots unten angehängt.

Listing Seite: -

Alarmfenster: -

Beschreibung Popup: -

Vielen Dank im Voraus.

Answer 1

Können Sie bitte Code unten versuchen

$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; 
     } 
    } 
    }); 
}