ng-bind-html不会阻止跨站点脚本

Question

我使用ng-bind-html来防止跨站点脚本， 阅读sanitize并找到this discussion和another good discussion。

虽然，我没有为我工作，你能帮我解决一下原因吗？

HTML：

<p class="big-text" ng-bind-html="to_trusted(message)">

JS：

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
};

当我添加以下行

时

<img src="x" onerror="alert('cross')">

并将其添加到消息中我可以看到它在DOM中呈现，当我刷新页面时，我可以看到该消息。

并显示弹出窗口：

你可以告诉我我做错了什么吗？

Answer 1

首先，它本身不是XSS。

其次，$sce.trustAsHtml与您的想法完全相反 - 事实上，它指示Angular“信任”HTML是安全的 - 而不是消毒。

要进行清理，您需要将ngSanitize作为依赖项添加到您的应用中，将ng-bind-html直接添加到html_code（不使用to_trusted）。

angular.module("myApp", ["ngSanitize"])
  .controller("MainCtrl", function($scope){
     $scope.html_code = '<img src="x" onerror="alert(\'cross\')">';
  });

在HTML中：

<div ng-bind-html="html_code"></div>

Answer 2

使用Sanitize后我更改了我的代码并使用 getTrustedHtml 而不是 trustAsHtml ，它在控制器上运行清理。

$scope.to_trusted = function(html_code) {
    return $sce.getTrustedHtml(html_code);
};

它解决了我的问题。