229

ng-bind-html-unsafeAngular 1.2 で削除されました

を使用する必要がある場所に何かを実装しようとしていますng-bind-html-unsafe。ドキュメントと github commit では、次のように述べています。

ng-bind-html は、$sce.trustAsHtml(string) の結果にバインドされると、ng-html-bind-unsafe のような動作 (innerHTML はサニタイズなしの結果) を提供します。

これどうやってやるの？

4

10 に答える 10

16

個人的には、データベースに入る前にすべてのデータをいくつかの 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);
}]);
于 2013-10-06T01:13:32.863 に答える
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>
于 2017-07-06T07:07:41.007 に答える
3

古いディレクティブを戻したい場合は、これをアプリに追加できます。

指令： 

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

于 2014-09-08T13:06:05.757 に答える
3

JavaScript

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

HTML

<pre ng-bind-html="get_pre(html)"></pre>
于 2015-03-24T05:52:56.107 に答える