web-dev-qa-db-fra.com

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

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

J'essaie d'implémenter quelque chose pour lequel je dois utiliser ng-bind-html-unsafe. Dans la documentation et sur le github commit, ils disent:

ng-bind-html fournit le même comportement que ng-html-bind-unsafe (le résultat de innerHTML sans sanitization) lorsqu'il est lié au résultat de $ sce.trustAsHtml (string).

Comment est-ce que tu fais ça?

angularjs
219
timhaak

Ç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>

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

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

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);
236
Nenad

Filtre 

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

Utilisation 

<ANY ng-bind-html="value | unsafe"></ANY>
618
Chris

Personnellement, je désinfecte toutes mes données avec certaines bibliothèques PHP avant d'entrer dans la base de données, de sorte qu'aucun autre filtre XSS ne soit nécessaire.

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);
}]);
16
Michael J. Calkins

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 code HTML.

<h2 ng-bind-html="someScopeValue | trustHtml"></h2>
4
STEEL

Si vous souhaitez récupérer l'ancienne directive, vous pouvez l'ajouter à votre application:

Directive: 

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

Utilisation

<div ng-bind-html-unsafe="group.description"></div>

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

3
Adrian Enriquez

JavaScript

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

HTML

<pre ng-bind-html="get_pre(html)"></pre>
3
wcc526

Pour Rails (du moins dans mon cas) si vous utilisez le joyau angularjs-Rails , n’oubliez pas d’ajouter le module sanitize.

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

Et puis chargez-le dans votre application ...

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

Ensuite, vous pouvez faire ce qui suit:

Sur le modèle:

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

Et éventuellement:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}
1
DevDude
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

<html ng-app="htmldoc" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-sanitize.min.js"></script>
    <script>
        angular.module('htmldoc', ['ngSanitize']).controller('x', function ($scope, $sce) {
            //$scope.htmlContent = '<script> (function () { location = \"http://moneycontrol.com\"; } )()<\/script> In last valid content';
            $scope.htmlContent = '';
            $scope.withoutSanitize = function () {
                return $sce.getTrustedHtml($scope.htmlContent);
            };
            $scope.postMessage = function () {
                var ValidContent = $sce.trustAsHtml($scope.htmlContent);

                //your ajax call here
            };
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        Example to show posting valid content to server with two way binding
        <div ng-controller="x">
            <p ng-bind-html="htmlContent"></p>
            <textarea ng-model="htmlContent" ng-trim="false"></textarea>
            <button ng-click="postMessage()">Send</button>
        </div>
    </form>
</body>
</html>
0
Saurabh