javascript - 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>