current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 169 down vote favorite
51

ng-bind-html-unsafe was removed in Angular 1.2

I'm trying to implement something where I need to use ng-bind-html-unsafe. In the docs and on the github commit they say:

ng-bind-html provides ng-html-bind-unsafe like behavior (innerHTML's the result without sanitization) when bound to the result of $sce.trustAsHtml(string).

How do you do this?

share|improve this question
    
possible duplicate of Insert HTML into view using AngularJS – kontur Oct 3 '14 at 13:42
up vote 176 down vote accepted

That should be:

<div ng-bind-html="trustedHtml"></div>

plus in your controller:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

instead of old syntax, where you could reference $scope.html variable directly:

<div ng-bind-html-unsafe="html"></div>

As several commenters pointed out, $sce has to be injected in the controller, otherwise you will get $sce undefined error.

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

 myApp.controller('MyController'['$sce', function($sce) {
    // ... [your code]
 }]);
share|improve this answer
9  
How can you do this with a value returned by a function? <p ng-bind-html="">{{description(category.id)}}</p> – dasper Sep 20 '13 at 7:00
2  
Not sure if I got you right, but: <p ng-bind-html="trustedHtml"></p> and $scope.trustedHtml = $sce.trustAsHtml(description(category.id)); – Nenad Sep 20 '13 at 17:55
1  
I love you for responding! Apparently the issue was me using 1.0.8. I have a form with dynamic number of sections so on change I wanted to show the proper description. <p ng-bind-html="description(category.id)"></p> then the last line of the function: return $sce.trustAsHtml(value); – dasper Sep 20 '13 at 18:49
2  
But... var x = sce.trustAsHtml('foo'); var y = sce.trustAsHtml('foo'); x==y; false ... So shouldn't this create an infinite digest loop since your function returns a new object ? – rych Oct 1 '13 at 20:06
23  
Also worth mentioning is $sce needs to be passed into the controller or you get $sce is not defined – isimmons Dec 21 '13 at 23:41
up vote 478 down vote
+100

Filter

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

Usage

<ANY ng-bind-html="value | unsafe"></ANY>
share|improve this answer
22  
Way better solution than the accepted answer, thanks! – bpaul Dec 30 '13 at 22:49
1  
Why do you need ngSanitize here? – user1082754 Jan 7 '14 at 12:30
2  
@OliverJosephAsh because the $sce service is defined in ngSanitize. they broke apart major functionality so we can use angular just a little bit and not always have to use the entire framework. – felix Jan 10 '14 at 9:17
9  
@felix in version 1.2 (when they added this) it is enabled by default as part of core, not ngSanitize, so there is no need for ngSanitize – TheSharpieOne Jan 15 '14 at 19:14
2  
This is a design decision made by the angular team - that's how filters should be implemented - if you do it otherwise, they won't work. The reason why this must return a function is that angular can delay processing until it 'finds the right moment'. Otherwise the framework would not have any influence on when the filter is called. That's both good and bad, but as far as I can tell - it's necessary to cope with angulars' tricky processing. More info here: docs.angularjs.org/api/ng/provider/$filterProvider – Chris Mar 6 '14 at 20:37
up vote 13 down vote

Personally I sanitize all my data with some PHP libraries before going into the database so there's no need for another XSS filter for me.

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

To use:

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

To disable $sce:

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(false);
}]);
share|improve this answer
    
I am unclear what the difference is between the two examples. One of our team members has a problem where they have System.out.println(&ldquo;Hello World!&rdquo;); in the database. She is using <div data-ng-bind-html="text"></div> and it appears on the page as: System.out.println(&ldquo;Hello World!&rdquo;);. Are you saying that using your ngBindHtmlUnsafe directive would fix this problem? – Alan Oct 13 '13 at 14:58
    
@Alan I believe it would work if it was <script>System.out.printIn("Hello World!");</script>, haven't tried this personally because my PHP removed all JS from user input. I removed my second example because Angular's native one is superior in every way just use that one. – Michael J. Calkins Oct 13 '13 at 16:38
    
How to do this for summernote editor, initially i will get the json data(which contains html) from server, in summernote i am using ng-model. how to make the code as trusted to display in summernote editor – codelearner Jun 9 at 4:19
up vote 3 down vote

If you want the old directive back, you can add this to your app:

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

Usage

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

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

share|improve this answer
    
Does not behave the same. – Casey Dec 19 '14 at 19:24
    
How to do this for summernote editor, initially i will get the json data(which contains html) from server, in summernote i am using ng-model. how to make the code as trusted to display in summernote editor – codelearner Jun 9 at 4:20
up vote 2 down vote

JavaScript

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

HTML

<pre ng-bind-html="get_pre(html)"></pre>
share|improve this answer
    
How to do this for summernote editor, initially i will get the json data(which contains html) from server, in summernote i am using ng-model. how to make the code as trusted to display in summernote editor – codelearner Jun 9 at 4:19
up vote 0 down vote

For Rails (at least in my case) if you are using the angularjs-rails gem, please remember to add the sanitize module

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

And then load it up in your app...

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

Then you can do the following:

On the template:

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

And eventually:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}
share|improve this answer
    
How to do this for summernote editor, initially i will get the json data(which contains html) from server, in summernote i am using ng-model. how to make the code as trusted to display in summernote editor – codelearner Jun 9 at 4:20
    
Check this out: github.com/summernote/summernote/issues/… – DevDude Jun 9 at 15:58
up vote 0 down vote

var line = "<label onclick="alert(1)">aaa</label>";

1. use filter

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

using (html):

<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box

2. use ngSanitize : safer

include angular-sanitize.js

<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

add ngSanitize in root angular app

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

using (html):

<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
share|improve this answer
    
How to do this for summernote editor, initially i will get the json data(which contains html) from server, in summernote i am using ng-model. how to make the code as trusted to display in summernote editor – codelearner Jun 9 at 4:19

protected by Pankaj Parkar Oct 6 '15 at 19:09

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.