Angular ng-bind-html -阻止执行JS代码

Question

我有一个关于ng-bind-html指令的问题。

我从外部服务(不受信任的)获取电子邮件HTML数据，因此可能会在消息正文中收到<script>标记。但是，我不想在我的页面上执行这段JS代码。为此，我使用了ng-bind-html指令。

我为此创建了一个示例，我的问题是执行alert()函数。如何拒绝这样做呢？

​

var app = angular.module('myApp', ['ngSanitize']);

app.controller('MainCtrl', function ($sce, $scope) {
    $scope.text = " <script>alert(222)</script> <script>alert(222)</script>";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-bind-html="text"></div>
</div>

​

https://jsfiddle.net/Suvroc/0c0ee472/8/

Answer 1

由于您引用了旧版本的AngularJS，因此无法获得正确的错误，因此很难解释。我尝试了类似的方式，发现了一些错误，这表明绑定了包含<script>的文本存在一些问题。

实际上，当终止script标记时，比如-> </script>，编译器会生成错误，显示为无效。

我在为一个项目工作时就遇到过这种情况，开发人员故意删除了</script>以防止任何运行时错误。否则整个代码就会崩溃。

我不知道它背后的真正原因，但它在过去已经为我们做到了这一点。

因此，在我的代码中，脚本不会自动运行；因此，就您的情况而言，只需删除或阻止script标记的结束/结束，就可以做到这一点。

同时，您可以使用以下代码：

HTML：

<div ng-app="app" ng-controller="test">
  Run time binding of HTML
  <div ng-bind-html="text"></div>
</div>

JS:

var app = angular.module('app', []);

app.controller('test', function($scope, $sce, $timeout) {
  $scope.bindHTML = "<script>alert(123);";
  $scope.text = $sce.trustAsHtml($scope.bindHTML);
});

Answer 2

在呈现数据之前，使用DOMPurify清理数据。它是目前最好的HTML消毒器。另一种选择是避开整个过程，但我猜您可能还想保留其他HTML标记？

Answer 3

您正在将$sce服务注入到您的控制器中，所以看起来您已经完成了一半。您可以在文本上运行$sce.trustAsHtml(text)函数，这将相应地对其进行清理。

有关详细信息，请参阅文档：https://docs.angularjs.org/api/ng/service/$sce

编辑:或者，考虑将$sanitize服务与$sce、https://docs.angularjs.org/api/ngSanitize/service/$sanitize一起使用

$sanitize(text);