Angularjs ng-bind-html-unsafe replacement

Question

I used to be able to use ng-bind-html-unsafe to output unsanitized code (because sanitization happens serverside).

But now that option is gone? I know I can use $sce.trustAsHtml but adding that to the JavaScript all over the place is a huge pain when unsafe was so easy to use.

How do I get unsafe back?

Matthew.Lothian · Answer 1 · 2014-06-14T02:43:08.273

23

Simpler again.

App.filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

Usage:

<any ng-bind-html="content | unsafe"></any>

For more on html binding check the docs here.

Just a warning: make sure you actually trust the html, or you could be opening a hole in your sites security.

edited Jun 14 '14 at 02:43

answered Feb 24 '14 at 04:50

Matthew.Lothian

2,072
17
23

1

Worked fine with ng-bind-html but *not* with `
{{ … }}
` for me. – Henrik N Jun 13 '14 at 15:56
Thanks @HenrikN you are correct. `{{ ... }}` will only print out the text of the content. I have updated the answer. – Matthew.Lothian Jun 14 '14 at 02:41
@J-Dizzle That is pretty similar. I guess he got their first, though it is a pretty common and well known pattern. Thanks for the notice. – Matthew.Lothian Nov 06 '14 at 03:09
So simple. So elegant. So beautiful. – JoshuaDavid Dec 09 '14 at 07:40

score 18 · Accepted Answer · answered Sep 21 '13 at 00:04

18

Well, it's quite simple to just create your own directive, here is an example.

Directive:

app.directive('bindHtmlUnsafe', function( $compile ) {
    return function( $scope, $element, $attrs ) {

        var compile = function( newHTML ) { // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
                                              // Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML ) { // Watch for changes to 
                                                      // the HTML
            if(!newHTML) return;
            compile(newHTML);   // Compile it
        });

    };
});

Usage:

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

Demo: http://jsfiddle.net/cC5VZ/2

answered Sep 21 '13 at 00:04

iConnor

19,997
14
62
97

Thanks! Why do you clear and append it instead of just setting it with `.html()`? – Harry Sep 22 '13 at 06:30
Because if you use `html();` it end's up like this `[object HTMLHeadingElement]` and I also prefer to append anyway – iConnor Sep 22 '13 at 14:55
it doesn't for me. Appending it is slower AFAIK, I changed it to just use html() – Harry Sep 22 '13 at 18:42
3

Seems kinda ridiculous they would remove useful functionality and force people to write their own directives for it. – CorayThan Dec 04 '13 at 22:44
@CorayThan That's angular for you. – iConnor Apr 14 '14 at 14:08
@CorayThan Don't be hating. They improved security and made it harder for ignorant users to unknowingly compromise their apps. [see here](https://docs.angularjs.org/api/ng/service/$sce#Example), all you need to do is use `$sce.trustAsHtml(...)` to explicitly trusted html. – Matthew.Lothian Jun 14 '14 at 02:51

score 1 · Answer 3 · answered Feb 08 '14 at 03:12

Simplest way, without $sce:

module.directive('html', function() {
    function link(scope, element, attrs) {

        var update = function() {
            element.html(scope.html);
        }

        attrs.$observe('html', function(value) {
            update();
        });
    }

    return {
        link: link,
        scope:  {
            html:   '='
        }
    };
});

How to use:

<div html="angular.variable"></div>

score 0 · Answer 4 · answered Aug 13 '14 at 19:10

I would strongly recommend checking out this SIMPLE JSFiddle example. Was a lifesaver:

http://jsfiddle.net/cC5VZ/2/

<div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML" compile-template></p>
  </div>
</div>



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

app.controller('testApp', function( $scope ) {
    $scope.testHTML = '<h1> Welcome :) </h1>';
});

app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
    return function( $scope, $element, $attrs ) {
        var compile = function( newHTML ) {
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        };

        var htmlName = $attrs.bindHtmlUnsafe;

        $scope.$watch(htmlName, function( newHTML ) {
            if(!newHTML) return;
            compile(newHTML);
        });

    };
});

Angularjs ng-bind-html-unsafe replacement

4 Answers4

Linked