Ng-bind-html-güvensiz kaldırıldığında HTML'yi nasıl enjekte edebilirim?

Benim denetleyici bir DIV HTML enjekte izin $sanitizesağlayıcı ve ng-bind-htm-unsafeyönerge kullanmaya çalışıyorum .

Ancak, işe yarayamıyorum.

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

Bunun AngularJS'den kaldırıldığı için olduğunu keşfettim (teşekkürler).

Ama olmadan ng-bind-html-unsafe, bu hatayı alıyorum:

http://errors.angularjs.org/undefined/$sce/unsafe

1. Sanitize.js'nin yüklü olduğundan emin olmanız gerekir. Örneğin, https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION Buradan //angular-sanitize.min.js adresinden yükleyin.
2. Eklemek gerekir ngSanitizesenin üzerine modülü app ör:var app = angular.module('myApp', ['ngSanitize']);
3. sadece ng-bind-htmlorijinal htmliçeriğe bağlanmanız gerekir . Kumandanızda başka bir şey yapmanıza gerek yok. Ayrıştırma ve dönüştürme ngBindHtmlyönerge tarafından otomatik olarak yapılır . ( Şununla ilgili How does it workbölümü okuyun : $ sce ). Yani, sizin durumunuzda <div ng-bind-html="preview_data.preview.embed.html"></div>bu işi yapardı.

Alex'in önerdiği gibi, kapsamınızdaki bir işlevi bildirmek yerine, basit bir filtreye dönüştürebilirsiniz:

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

O zaman bu şekilde kullanabilirsiniz:

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

Ve işte çalışan bir örnek: http://jsfiddle.net/leeroy/6j4Lg/1/

Belirtilen diğer yorumlardan biri olarak Açısal 1.2.0 ... 'ı kullandığınızı belirttiniz ng-bind-html-unsafe.

Bunun yerine, böyle bir şey yapmak isteyeceksiniz:

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

Denetleyicinizde $scehizmeti enjekte edin ve HTML'yi "güvenilir" olarak işaretleyin:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

1.2.0-rc3 veya daha yenisini kullanmak isteyeceğinizi unutmayın. ( Rc3'teki "gözlemcilerin" güvenilir HTML üzerinde düzgün çalışmasını engelleyen bir hatayı düzelttiler .)

Benim için en basit ve en esnek çözüm:

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

Ve kontrolörünüze fonksiyon ekleyin:

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

Oyun $scekumandanızın başlatma işlemini eklemeyi unutmayın .

Bence bu en iyi çözüm şudur:

1. Örneğin, uygulamanızda kullanılan common.module.js dosyasında olabilecek özel bir filtre oluşturun:

   var app = angular.module('common.module', []);
   
   // html filter (render text as html)
   app.filter('html', ['$sce', function ($sce) { 
       return function (text) {
           return $sce.trustAsHtml(text);
       };    
   }])
   

2. Kullanımı:

   <span ng-bind-html="yourDataValue | html"></span>

Şimdi - yönergesi neden görmüyorum ng-bind-htmldeğil trustAsHtmlonun işlevinin bir parçası olarak - Ya etmezse o bana biraz aptal görünüyor

Her neyse - işte böyle yapıyorum - zamanın% 67'si, her zaman çalışıyor.

Kendi basit güvensiz html bağlantınızı oluşturabilirsiniz, elbette kullanıcı girdisini kullanırsanız bir güvenlik riski olabilir.

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})

Ng-bind-html-güvensiz içinde {{}} kullanmanıza gerek yoktur:

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

İşte bir örnek: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

{{}} Operatörü temel olarak ng-bind için bir kısayoldur, bu yüzden denediğiniz şey bir bağlamanın içindeki bir bağlamaya karşılık gelir ve bu işe yaramaz.

Benzer bir sorun yaşadım. Yine de github'da barındırılan markdown dosyalarımdan içerik alınamadı.

App.js'de $ sceDelegateProvider'a bir beyaz liste (github alanı eklenmiş olarak) ayarladıktan sonra bir cazibe gibi çalıştı.

Açıklama: Farklı bir URL'den içerik yüklerseniz güvenilir olarak kaydırmak yerine bir beyaz liste kullanma.

Dokümanlar: $ sceDelegateProvider ve ngInclude (harici HTML parçasını almak, derlemek ve dahil etmek için)

Sıkı Bağlamsal Kaçış tamamen devre dışı bırakılabilir, böylece html kullanarak enjekte edebilirsiniz ng-html-bind. Bu güvenli olmayan bir seçenektir, ancak test sırasında yardımcı olur.

AngularJS belgelerinden bir$sce örnek :

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

Yukarıdaki yapılandırma bölümünü uygulamanıza eklemek, html'yi enjekte etmenize olanak tanır ng-html-bind, ancak dokümanın belirttiği gibi:

SCE, küçük kodlama yükü için size birçok güvenlik avantajı sağlar. SCE devre dışı bırakılmış bir uygulamayı almak ve kendi başınıza güvenli hale getirmek veya daha sonraki bir aşamada SCE'yi etkinleştirmek çok daha zor olacaktır. SCE'nin sunulmasından önce yazılmış çok sayıda mevcut kodunuz olduğu ve bunları bir kerede bir modülü taşıdığınız durumlarda SCE'yi devre dışı bırakmak mantıklı olabilir.

Filtreyi böyle kullanabilirsiniz

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

kullanım

<div ng-bind-html="myData | trustAs"></div>

diğer kaynak türleri için kullanılabilir, örneğin iframe'ler için kaynak bağlantısı ve burada bildirilen diğer türler