Avec ng-bind-html-unsafe enlevé, comment puis-je injecter du HTML?

J’essaie d’utiliser le fournisseur $sanitize et la directive ng-bind-htm-unsafe pour permettre à mon contrôleur d’injecter du HTML dans un DIV.

Cependant, je ne peux pas le faire fonctionner.

 

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

Mais sans ng-bind-html-unsafe , je reçois 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/%5BLAST_VERSION%5D/angular-sanitize.min.js
  2. vous devez inclure le module ngSanitize sur votre app par exemple: var app = angular.module('myApp', ['ngSanitize']);
  3. il suffit de lier avec ng-bind-html le contenu html original. Pas besoin de faire autre chose dans votre contrôleur. L’parsing et la conversion sont automatiquement effectuées par la directive ngBindHtml . (Lisez la section How does it work à ce sujet: $ sce ). Donc, dans votre cas,

    ferait le travail.

Au lieu de déclarer une fonction dans votre scope, comme suggéré par Alex, vous pouvez le 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:

 

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

Vous avez indiqué que vous utilisiez Angular 1.2.0 … comme l’indiquait l’un des autres commentaires, ng-bind-html-unsafe était obsolète.

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

 

Dans votre contrôleur, injectez le service $sce 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 voudrez utiliser 1.2.0-rc3 ou plus récent. (Ils ont corrigé un bogue dans rc3 qui empêchait les “observateurs” de fonctionner correctement en HTML sécurisé.)

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

 

Et append une fonction à votre contrôleur:

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

N’oubliez pas d’append $sce à l’initialisation de votre contrôleur.

La meilleure solution à mon avis est la suivante:

  1. Créez un filtre personnalisé qui peut être dans un fichier common.module.js par exemple – utilisé dans 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:

      

Maintenant – je ne vois pas pourquoi la directive ng-bind-html ne fait pas trustAsHtml à trustAsHtml dans le cadre de sa fonction – semble un peu idiot que ce ne soit pas le cas

En tout cas, 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, bien sûr, si vous utilisez une entrée utilisateur, cela pourrait constituer un risque de 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:

 

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

L’opérateur {{}} est essentiellement un raccourci pour ng-bind, ce que vous tentez de faire est 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é) au $ sceDelegateProvider dans app.js, cela fonctionnait comme un charme.

Description: Utiliser une liste blanche au lieu de faire une copie de confiance si vous chargez du contenu à partir d’une URL différente.

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

Vous pouvez utiliser un filtre comme celui-ci

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

usage

 

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

Ssortingct Contextual Escaping peut être entièrement désactivé, vous permettant d’injecter du HTML en utilisant ng-html-bind . Ceci est une option dangereuse, mais utile lors des tests.

Exemple tiré 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); }); 

Joindre la section de configuration ci-dessus à votre application vous permettra d’injecter html dans ng-html-bind , mais comme la doc le remarque:

SCE vous offre de nombreux avantages en matière de sécurité pour un faible codage des frais généraux. Il sera beaucoup plus difficile de prendre une application SCE désactivée et de la sécuriser 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 qui a été écrit avant l’introduction de SCE et dont vous effectuez la migration d’un module à la fois.