angularjs - angularjs 应用程序中的 XSS 问题

Question

这是关于在输入及其描述字段之一中注入(inject)脚本标记(如下所示)。值保存良好并显示在网格中。

<强> 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 中，而是脚本在模态之前运行。

这里的预期行为是当我单击列表中的 anchor 时，它应该在弹出窗口中显示其描述。这里发生的情况是，在显示描述之前，由于脚本标记注入(inject)，我收到一个警报窗口。

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

附上以下所有屏幕截图。

列表页面:-

警报窗口:-

描述弹出窗口:-

提前致谢。

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