Comment utilisez-vous $ sce.trustAsHtml (ssortingng) pour répliquer ng-bind-html-unsafe dans Angular 1.2+

ng-bind-html-unsafe été supprimé dans Angular 1.2

J’essaie d’implémenter quelque chose où je dois utiliser ng-bind-html-unsafe . Dans les docs et sur le github, ils s’engagent à dire:

ng-bind-html fournit un comportement similaire à ng-html-bind-unsafe (innerHTML est le résultat sans désinfection) lorsqu’il est lié au résultat de $ sce.trustAsHtml (ssortingng).

Comment est-ce que tu fais ça?

Ça devrait être:

 

plus dans votre contrôleur:

 $scope.html = '
  • render me please
'; $scope.trustedHtml = $sce.trustAsHtml($scope.html);

au lieu de l’ancienne syntaxe, où vous pouvez référencer directement la variable $scope.html :

 

Comme plusieurs intervenants l’ont souligné, $sce doit être injecté dans le contrôleur, sinon vous obtiendrez $sce undefined erreur $sce undefined .

  var myApp = angular.module('myApp',[]); myApp.controller('MyController', ['$sce', function($sce) { // ... [your code] }]); 

Filtre

 app.filter('unsafe', function($sce) { return $sce.trustAsHtml; }); 

Usage

  

Personnellement, je désinfecte toutes mes données avec certaines bibliothèques PHP avant de passer à la firebase database, donc je n’ai pas besoin d’un autre filtre XSS.

De AngularJS 1.0.8

 directives.directive('ngBindHtmlUnsafe', [function() { return function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe); scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) { element.html(value || ''); }); } }]); 

Utiliser:

 

Pour désactiver $sce :

 app.config(['$sceProvider', function($sceProvider) { $sceProvider.enabled(false); }]); 

var line = "";

1. utiliser le filtre

 app.filter('unsafe', function($sce) { return $sce.trustAsHtml; }); 

en utilisant (html):

  ==>click `aaa` show alert box 

2. utiliser ngSanitize: plus sûr

inclure angular-sanitize.js

  

Ajouter ngSanitize dans l’application angular racine

 var app = angular.module("app", ["ngSanitize"]); 

en utilisant (html):

  ==>click `aaa` nothing happen 

Créer simplement un filtre fera l’affaire. (Répondu pour Angular 1.6)

 .filter('trustHtml', [ '$sce', function($sce) { return function(value) { return $sce.trustAs('html', value); } } ]); 

Et utilisez ceci comme suit dans le HTML.

 

Si vous souhaitez que l’ancienne directive revienne, vous pouvez l’append à votre application:

Directif:

 directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){ return { scope: { ngBindHtmlUnsafe: '=', }, template: "
", link: function($scope, iElm, iAttrs, controller) { $scope.updateView = function() { $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe); } $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) { $scope.updateView(newVal); }); } }; }]);

Usage

 

Source – https://github.com/angular-ui/bootstrap/issues/813

JavaScript

 $scope.get_pre = function(x) { return $sce.trustAsHtml(x); }; 

HTML

 

Pour les Rails (du moins dans mon cas), si vous utilisez le joyau angularjs-rails , n’oubliez pas d’append le module de désinfection

 //= require angular //= require angular-sanitize 

Et puis chargez-le dans votre application …

 var myDummyApp = angular.module('myDummyApp', ['ngSanitize']); 

Ensuite, vous pouvez effectuer les opérations suivantes:

Sur le template:

 %span{"ng-bind-html"=>"phone_with_break(x)"} 

Et éventuellement:

 $scope.phone_with_break = function (x) { if (x.phone != "") { return x.phone + "
"; } return ''; }
 my helpful code for others(just one aspx to do text area post):: < %@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %> < !DOCTYPE html> enter code here         
Example to show posting valid content to server with two way binding