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

Question

我使用ng-bind-html来防止跨站点脚本,阅读sanitize并发现这个讨论和另一个很好的讨论.

虽然,我没有为我工作,你能帮助我找出原因吗？

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>