ng-bind-html-unsafe été supprimé dans Angular 1.2
J'essaye d'implémenter quelque chose où j'ai besoin d'utiliser ng-bind-html-unsafe . Dans les docs et sur le commit github, ils disent:
ng-bind-html fournit un comportement similaire à ng-html-bind-unsafe (innerHTML est le résultat sans assainissement) lorsqu'il est lié au résultat de $ sce.trustAsHtml (string).
Comment est-ce que tu fais ça?
Ça devrait être:
<div ng-bind-html="trustedHtml"></div>
plus dans votre contrôleur:
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
au lieu de l'ancienne syntaxe, où vous pourriez référencer directement la variable $scope.html :
<div ng-bind-html-unsafe="html"></div>
Personnellement, je désinfecte toutes mes données avec des librairies PHP avant d'aller dans la base de données, donc je n'ai pas besoin d'un autre filtre XSS pour moi.
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:
<div ng-bind-html-unsafe="group.description"></div>
Pour désactiver $ sce:
app.config(['$sceProvider', function($sceProvider) {
$sceProvider.enabled(false);
}]);
Si vous voulez récupérer l'ancienne directive, vous pouvez l'ajouter à votre application:
Directif:
directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){
return {
scope: {
ngBindHtmlUnsafe: '=',
},
template: "<div ng-bind-html='trustedHtml'></div>",
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
<div ng-bind-html-unsafe="group.description"></div>
Voici ma mise en œuvre:
script.js
// Code goes here
(function(){
var app = angular.module("test-app",["ngSanitize"]);
app.controller("testController",['$sce', function($sce){
this.getHtmlContent = function(){
return $sce.trustAsHtml('<iframe width="420" height="315" src="//www.youtube.com/embed/2Z4m4lnjxkY" frameborder="0" allowfullscreen></iframe>');
}
}]);
})();
index.html
<head>
<script data-require="angular.js@*" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<script data-require="angular-sanitize@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController as testCtrl">
<div ng-bind-html="testCtrl.getHtmlContent()"></div>
</body>
</html>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
