Как вы используете $sce.trustAsHtml(string) для репликации ng-bind-html-unsafe в Angular 1.2+

Ответ 1

Это должно быть:

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

плюс в вашем контроллере:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

вместо старого синтаксиса, где вы можете напрямую ссылаться на переменную $scope.html:

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

Как отметили несколько комментаторов, $sce должен быть введен в контроллер, иначе вы получите ошибку $sce undefined.

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

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);

Ответ 2

Фильтр

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

Использование

<ANY ng-bind-html="value | unsafe"></ANY>

Ответ 3

Лично я дезинфицирую все свои данные с некоторыми библиотеками PHP, прежде чем переходить в базу данных, поэтому мне не нужен другой фильтр XSS.

От AngularJS 1.0.8

directives.directive('ngBindHtmlUnsafe', [function() {
    return function(scope, element, attr) {
        element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
        scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) {
            element.html(value || '');
        });
    }
}]);

Для использования:

<div ng-bind-html-unsafe="group.description"></div>

Чтобы отключить $sce:

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}]);

Ответ 4

var line = "<label onclick="alert(1)">aaa</label>";

1. использовать фильтр

app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

используя (html):

<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box

2. Использовать ngSanitize: безопаснее

включить angular-sanitize.js

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

добавить ngSanitize в корневом каталоге angular

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

используя (html):

<span ng-bind-html="line"></span>
==>click `aaa` nothing happen

Ответ 5

Если вы хотите вернуть прежнюю директиву, вы можете добавить это в свое приложение:

Директива:

directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
    return {
        scope: {
            ngBindHtmlUnsafe: '=',
        },
        template: "<div ng-bind-html='trustedHtml'></div>",
        link: function($scope, iElm, iAttrs, controller) {
            $scope.updateView = function() {
                $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe);
            }

            $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) {
                $scope.updateView(newVal);
            });
        }
    };
}]);

Использование

<div ng-bind-html-unsafe="group.description"></div>

Источник - https://github.com/angular-ui/bootstrap/issues/813

Ответ 6

JavaScript

$scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
};

HTML

<pre ng-bind-html="get_pre(html)"></pre>

Ответ 7

Просто создание фильтра сделает трюк. (Ответил за Angular 1.6)

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

И используйте это, как описано в html.

<h2 ng-bind-html="someScopeValue | trustHtml"></h2>

Ответ 8

Для Rails (по крайней мере, в моем случае), если вы используете angularjs-rails gem, не забудьте добавить модуль sanitize

//= require angular
//= require angular-sanitize

И затем загрузите его в свое приложение...

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

Затем вы можете сделать следующее:

В шаблоне:

%span{"ng-bind-html"=>"phone_with_break(x)"}

И в итоге:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}