angularjs应用程序中的XSS问题

Question

这是关于在其中一个输入及其描述字段中注入脚本标记（如下所示）。值保存正常并显示在网格中。

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

表单字段： -

您可以在下面的屏幕截图中看到警报脚本正在从说明字段中运行。

模态实施（点击列表中的文档类型链接时执行）： -

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

如果输入参数的脚本标记包含某些操作，则它不会在UI中显示，而是在模式之前运行脚本。

此处的预期行为是当我点击列表中的锚点时，它应该在弹出窗口中显示其描述。这里发生的事情是，在显示描述之前，由于脚本标记注入，我得到一个警告窗口。

如何避免在弹出窗口之前执行警报脚本。

附上以下所有截图。

列表页面： -

提醒窗口： -

说明弹出： -

提前致谢。

Answer 1

请试试下面的代码

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