Avec ng-bind-html-unsafe supprimé, comment injecter du HTML?

J'essaie d'utiliser le $sanitizefournisseur et la ng-bind-htm-unsafedirective pour permettre à mon contrôleur d'injecter du HTML dans un DIV.

Cependant, je ne peux pas le faire fonctionner.

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

J'ai découvert que c'est parce qu'il a été supprimé d'AngularJS (merci).

Mais sans ng-bind-html-unsafe, j'obtiens cette erreur:

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

1. Vous devez vous assurer que sanitize.js est chargé. Par exemple, chargez-le depuis https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION[/angular-sanitize.min.js
2. vous devez inclure un ngSanitizemodule sur votre app exemple:var app = angular.module('myApp', ['ngSanitize']);
3. il vous suffit de vous lier au contenu ng-bind-htmloriginal html. Pas besoin de faire autre chose dans votre manette. L'analyse et la conversion sont effectuées automatiquement par la ngBindHtmldirective. (Lisez la How does it worksection à ce sujet: $ sce ). Donc, dans votre cas, <div ng-bind-html="preview_data.preview.embed.html"></div>ferait le travail.

Au lieu de déclarer une fonction dans votre portée, comme suggéré par Alex, vous pouvez la convertir en un simple filtre:

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

Ensuite, vous pouvez l'utiliser comme ceci:

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

Et voici un exemple de travail: http://jsfiddle.net/leeroy/6j4Lg/1/

Vous avez indiqué que vous utilisez Angular 1.2.0 ... car l'un des autres commentaires indiqués ng-bind-html-unsafeest obsolète.

Au lieu de cela, vous voudrez faire quelque chose comme ceci:

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

Dans votre contrôleur, injectez le $sceservice et marquez le code HTML comme "approuvé":

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

Notez que vous souhaiterez utiliser 1.2.0-rc3 ou une version plus récente. (Ils ont corrigé un bogue dans rc3 qui empêchait les "observateurs" de fonctionner correctement sur du HTML de confiance.)

Pour moi, la solution la plus simple et la plus flexible est:

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

Et ajoutez une fonction à votre contrôleur:

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

N'oubliez pas d'ajouter $sceà l'initialisation de votre contrôleur.

À mon avis, la meilleure solution est la suivante:

1. Créez un filtre personnalisé qui peut être dans un fichier common.module.js par exemple - utilisé dans toute votre application:

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

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

Maintenant - je ne vois pas pourquoi la directive ng-bind-htmlne fait pas trustAsHtmlpartie de sa fonction - me semble un peu stupide qu'elle ne le fasse pas

Quoi qu'il en soit - c'est comme ça que je le fais - 67% du temps, ça marche toujours.

Vous pouvez créer votre propre liaison HTML non sécurisée simple, bien sûr, si vous utilisez l'entrée utilisateur, cela pourrait constituer un risque pour la sécurité.

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

Vous n'avez pas besoin d'utiliser {{}} dans ng-bind-html-unsafe:

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

Voici un exemple: http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

L'opérateur {{}} est essentiellement un raccourci pour ng-bind, donc ce que vous essayiez équivaut à une liaison à l'intérieur d'une liaison, ce qui ne fonctionne pas.

J'ai eu un problème similaire. Je n'ai toujours pas pu obtenir le contenu de mes fichiers de démarques hébergés sur github.

Après avoir configuré une liste blanche (avec un domaine github ajouté) pour $ sceDelegateProvider dans app.js, cela a fonctionné comme un charme.

Description: utiliser une liste blanche au lieu de l'habiller comme approuvé si vous chargez du contenu à partir d'une URL différente.

Documents: $ sceDelegateProvider et ngInclude (pour récupérer, compiler et inclure un fragment HTML externe)

L'échappement contextuel strict peut être entièrement désactivé, ce qui vous permet d'injecter du HTML à l'aide de ng-html-bind. Il s'agit d'une option dangereuse, mais utile lors des tests.

Exemple de la documentation AngularJS sur$sce :

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

Attacher la section de configuration ci-dessus à votre application vous permettra d'injecter du HTML ng-html-bind, mais comme le remarque le doc:

SCE vous offre de nombreux avantages en matière de sécurité pour une faible surcharge de codage. Il sera beaucoup plus difficile de prendre une application désactivée SCE et de la sécuriser par vous-même ou d'activer SCE ultérieurement. Il peut être judicieux de désactiver SCE dans les cas où vous avez beaucoup de code existant écrit avant l'introduction de SCE et que vous les migrez un module à la fois.

Vous pouvez utiliser un filtre comme celui-ci

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

usage

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

il peut être utilisé pour d'autres types de ressources, par exemple le lien source pour les iframes et autres types déclarés ici