XSS: $ sce.trustAsHtml выполняет <img>код ошибки 'onerror'

Question

Я пытаюсь предотвратить выполнение небезопасного содержимого, используя ng-bind-html и $ sce.trustAsHtml .

Но если я помещу некоторые js внутри тега (например, onerror = "alert (123)" ), он выполняет небезопасныйсодержание.

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

app.controller('test', function($scope, $sce, $timeout) {
  $scope.text = $sce.trustAsHtml('<ul><b>onLoad<img src=x onload="alert(\'onload\')"/></b></ul>'+'<ul><b>onError<img src=x onerror="alert(\'onerror\')"/></b><ul>'+'<ul><b>onClick<img src=x onclick="alert(\'onclick\')"/></b></ul>');
});

<script src="https://code.angularjs.org/1.7.4/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
  Run time binding of HTML
  <div ng-bind-html="text"></div>
</div>

Не могли бы вы подсказать, как предотвратить выполнение кода js здесь?

РЕДАКТИРОВАТЬ

Согласно предложению @Quentin [и ng-bind-html не предотвращает межсайтовый скриптинг , я удалил вызов trustAsHtml иallow Sanitize, но директива ng-bind-html по-прежнему вызывает trustAsHtml внутри $ watch и получает ошибку.

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

app.controller('test', function($scope) {
  $scope.text = '<ul><b>onLoad<img src=x onload="alert(\'onload\')"/></b></ul>'+'<ul><b>onError<img src=x onerror="alert(\'onerror\')"/></b><ul>'+'<ul><b>onClick<img src=x onclick="alert(\'onclick\')"/></b></ul>';
});

<script src="https://code.angularjs.org/1.7.4/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
  Run time binding of HTML
  <div ng-bind-html="text"></div>
</div>

var ngBindHtmlDirective = ['$sce', '$parse', '$compile', function($sce, $parse, $compile) {
  return {
    restrict: 'A',
    compile: function ngBindHtmlCompile(tElement, tAttrs) {
      var ngBindHtmlGetter = $parse(tAttrs.ngBindHtml);
      var ngBindHtmlWatch = $parse(tAttrs.ngBindHtml, function sceValueOf(val) {
        // Unwrap the value to compare the actual inner safe value, not the wrapper object.
        return $sce.valueOf(val);
      });
      $compile.$$addBindingClass(tElement);

      return function ngBindHtmlLink(scope, element, attr) {
        $compile.$$addBindingInfo(element, attr.ngBindHtml);

        scope.$watch(ngBindHtmlWatch, function ngBindHtmlWatchAction() {
          // The watched value is the unwrapped value. To avoid re-escaping, use the direct getter.
          var value = ngBindHtmlGetter(scope);
          element.html($sce.getTrustedHtml(value) || '');
        });
      };
    }
  };
}];

Выдает следующее сообщение об ошибке

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
https://errors.angularjs.org/1.7.3/$sce/unsafe
    at angular.js:138
    at htmlSanitizer (angular.js:20119)
    at getTrusted (angular.js:20320)
    at Object.sce.(:8080/lia/anonymous function) [as getTrustedHtml] (http://localhost:9000/js/angularjs/lib/angular/angular.js:21040:16)
    at ngBindHtmlWatchAction (angular.js:27610)
    at Scope.$digest (angular.js:19102)
    at Scope.$apply (angular.js:19462)
    at bootstrapApply (angular.js:1944)
    at Object.invoke (angular.js:5121)
    at doBootstrap (angular.js:1942)

Я использую угловой v1.7.4.Не могли бы вы помочь мне здесь?

Answer 1

См. Документацию :

Вы также можете обойти санитарную обработку для значений, которые, как вы знаете, безопасны.Чтобы сделать это, привяжите к явно доверенному значению через $ sce.trustAsHtml.

trustAsHtml делает полную противоположность того, что вы хотите.Не используйте это здесь.