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

Question

我使用 ng-bind-html 来防止跨站脚本，了解 sanitize and found this discussion and 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 到 "trust" 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，它在控制器上运行 sanitize。

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

它解决了我的问题。

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

ng-bind-html doesn't prevent cross site scripting

javascript

xss

angularjs