Як видалити ng-bind-html-небезопасно, як я вставлю HTML?

Я намагаюся використовувати $sanitize провайдер і ng-bind-htm-unsafeдирективу, щоб дозволити моєму контролеру вводити HTML у DIV.

Однак я не можу змусити його працювати.

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

Я виявив, що це тому, що його видалили з AngularJS (спасибі).

Але без цього ng-bind-html-unsafeя отримую цю помилку:

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

1. Вам потрібно переконатися, що sanitize.js завантажений. Наприклад, завантажте його з https://ajax.googleapis.com/ajax/libs/angularjs/ evidenceLAST_VERSIONSense/angular-sanitize.min.js
2. вам потрібно включити ngSanitizeмодуль, app наприклад:var app = angular.module('myApp', ['ngSanitize']);
3. вам просто потрібно зв’язати ng-bind-htmlоригінальний htmlвміст. Не потрібно нічого робити у своєму контролері. Синтаксичний аналіз та перетворення здійснюються автоматично ngBindHtmlдирективою. (Прочитайте How does it workрозділ на цьому: $ sce ). Отже, у вашому випадку <div ng-bind-html="preview_data.preview.embed.html"></div>зробили б роботу.

Замість того, щоб оголосити функцію у вашому обсязі, як запропонував Алекс, ви можете її перетворити на простий фільтр:

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

Тоді ви можете використовувати його так:

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

І ось робочий приклад: http://jsfiddle.net/leeroy/6j4Lg/1/

Ви вказали, що ви використовуєте Angular 1.2.0 ... як один із інших коментарів, ng-bind-html-unsafeзастарілий.

Натомість вам захочеться зробити щось подібне:

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

У своєму контролері введіть $sceслужбу та позначте HTML як "довірений":

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 або новішу версію. (Вони виправили помилку в rc3, яка заважала спостерігачам працювати належним чином на надійному HTML.)

Для мене найпростішим та гнучким рішенням є:

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

І додайте функцію до свого контролера:

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

Не забудьте додати $sceдо ініціалізації вашого контролера.

Найкраще рішення, на мою думку, це:

1. Створіть спеціальний фільтр, який може бути, наприклад, у файлі common.module.js - який використовується у вашому додатку:

   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. Використання:

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

Тепер - я не бачу, чому директива ng-bind-htmlцього не робитьtrustAsHtml є частиною своєї функції - мені здається трохи непростим, що це не так

У будь-якому випадку - так я і роблю - 67% часу, це працює колись.

Ви можете створити власну просту небезпечну HTML-прив'язку, звичайно, якщо ви використовуєте введення користувача, це може бути ризиком для безпеки.

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

Вам не потрібно використовувати {{}} всередині ng-bind-html-unsafe:

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

Ось приклад: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

Оператор {{}} по суті є лише скороченням для ng-bind, тому те, що ви намагалися, означає прив'язку всередині прив'язки, яка не працює.

У мене була подібна проблема. Ще не вдалося отримати вміст з моїх файлів розмітки, розміщених на github.

Після налаштування білого списку (із доданим доменом github) до $ sceDelegateProvider в app.js він працював як шарм.

Опис: Використання білого списку замість упаковки як надійного, якщо ви завантажуєте вміст з інших URL-адрес.

Документи: $ sceDelegateProvider та ngInclude (для отримання, компілювання та включення зовнішнього фрагмента HTML)

Суворе контекстне втечу може бути вимкнено повністю, що дозволяє вводити HTML за допомогою ng-html-bind. Це небезпечний варіант, але корисний при тестуванні.

Приклад з документації AngularJS про$sce :

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

Додавання вищевказаного розділу конфігурації до вашої програми дозволить ввести html у файл ng-html-bind, але як зазначає документ:

SCE дає безліч переваг безпеки для невеликого кодування накладних витрат. Набагато складніше буде взяти додаток, відключений SCE, або захистити його самостійно, або включити SCE на більш пізньому етапі. Можливо, має сенс відключити SCE у випадках, коли у вас є багато існуючого коду, який був написаний до введення SCE, і ви мігруєте їх одночасно модулем.

Ви можете використовувати такий фільтр

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

використання

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

його можна використовувати для інших типів ресурсів, наприклад, посилання на джерело для iframes та інші типи, декларовані тут