Dengan ng-bind-html-tidak aman dihapus, bagaimana cara saya menyuntikkan HTML?

Saya mencoba menggunakan $sanitizepenyedia danng-bind-htm-unsafe arahan untuk memungkinkan pengontrol saya untuk menyuntikkan HTML ke dalam DIV.

Namun, saya tidak bisa membuatnya bekerja.

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

Saya menemukan bahwa itu karena dihapus dari AngularJS (terima kasih).

Tapi tanpa ng-bind-html-unsafe, saya mendapatkan kesalahan ini:

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

1. Anda perlu memastikan bahwa sanitize.js dimuat. Misalnya, muat dari https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION[/angular-sanitize.min.js
2. Anda perlu memasukkan ngSanitizemodul pada app mis Anda :var app = angular.module('myApp', ['ngSanitize']);
3. Anda hanya perlu mengikat dengan konten ng-bind-htmlasli html. Tidak perlu melakukan hal lain di controller Anda. Penguraian dan konversi secara otomatis dilakukan oleh ngBindHtmlarahan. (Baca How does it workbagian ini: $ sce ). Jadi, dalam kasus Anda <div ng-bind-html="preview_data.preview.embed.html"></div>akan melakukan pekerjaan.

Alih-alih mendeklarasikan fungsi dalam cakupan Anda, seperti yang disarankan oleh Alex, Anda dapat mengubahnya menjadi filter sederhana:

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

Maka Anda dapat menggunakannya seperti ini:

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

Dan di sini adalah contoh kerja: http://jsfiddle.net/leeroy/6j4Lg/1/

Anda mengindikasikan bahwa Anda menggunakan Angular 1.2.0 ... sebagai salah satu komentar lain yang ditunjukkan, ng-bind-html-unsafe telah usang.

Sebagai gantinya, Anda ingin melakukan sesuatu seperti ini:

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

Di controller Anda, menyuntikkan $scelayanan, dan tandai HTML sebagai "tepercaya":

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

Perhatikan bahwa Anda ingin menggunakan 1.2.0-rc3 atau yang lebih baru. (Mereka memperbaiki bug di rc3 yang mencegah "pengamat" bekerja dengan baik pada HTML tepercaya.)

Bagi saya, solusi paling sederhana dan paling fleksibel adalah:

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

Dan tambahkan fungsi ke controller Anda:

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

Jangan lupa tambahkan $sceinisialisasi pengontrol Anda.

Solusi terbaik untuk ini menurut saya adalah ini:

1. Buat filter khusus yang dapat berupa file common.module.js misalnya - digunakan di seluruh aplikasi Anda:

   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. Pemakaian:

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

Sekarang - saya tidak mengerti mengapa arahan ng-bind-htmltidaktrustAsHtml sebagai bagian dari fungsinya - tampaknya agak bodoh bagi saya bahwa itu tidak

Ngomong-ngomong - itulah cara saya melakukannya - 67% dari waktu, itu berhasil setiap saat.

Anda dapat membuat pengikatan html sederhana yang tidak aman sendiri, tentu saja jika Anda menggunakan input pengguna, itu bisa menjadi risiko keamanan.

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

Anda tidak perlu menggunakan {{}} di dalam ng-bind-html-unsafe:

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

Berikut ini contohnya: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Operator {{}} pada dasarnya hanyalah singkatan untuk ng-bind, jadi apa yang Anda coba sama dengan penjilidan di dalam penjilidan, yang tidak berfungsi.

Saya punya masalah serupa. Masih tidak bisa mendapatkan konten dari file penurunan harga saya yang diinangi di github.

Setelah menyiapkan daftar putih (dengan domain github ditambahkan) ke $ sceDelegateProvider di app.js itu berfungsi seperti pesona.

Deskripsi: Menggunakan daftar putih alih-alih membungkus sebagai tepercaya jika Anda memuat konten dari url yang berbeda.

Documents: $ sceDelegateProvider dan ngInclude (untuk mengambil, mengkompilasi, dan memasukkan fragmen HTML eksternal)

Escaping Kontekstual yang Ketat dapat dinonaktifkan sepenuhnya, memungkinkan Anda untuk menyuntikkan html menggunakan ng-html-bind. Ini adalah opsi yang tidak aman, tetapi sangat membantu saat pengujian.

Contoh dari dokumentasi AngularJS pada$sce :

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

Melampirkan bagian konfigurasi di atas ke aplikasi Anda akan memungkinkan Anda menyuntikkan html ke dalamnya ng-html-bind, tetapi seperti yang dinyatakan oleh dokumen:

SCE memberi Anda banyak manfaat keamanan untuk sedikit pengkodean overhead. Akan jauh lebih sulit untuk mengambil aplikasi yang dinonaktifkan oleh SCE dan mengamankannya sendiri atau mengaktifkan SCE di tahap selanjutnya. Mungkin masuk akal untuk menonaktifkan SCE untuk kasus-kasus di mana Anda memiliki banyak kode yang sudah ada yang ditulis sebelum SCE diperkenalkan dan Anda memigrasikannya sebuah modul pada suatu waktu.

Anda dapat menggunakan filter seperti ini

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 "";
        };
    }
]);

pemakaian

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

dapat digunakan untuk jenis sumber daya lainnya, misalnya tautan sumber untuk iframe dan jenis lain yang dideklarasikan di sini