javascriptangularjsngsanitize

AngularJS $sce only trust certain elements


Assume the following string:

<b><i><anotherelement>Hello World</anotherelement></i></b>

I only want to allow the bold element to work, while the italic element (and any other elements!) remains untouched, so the output is: <i><anotherelement>Hello World</anotherelement></i>.

Currently I use:

function outputHtml($element, value){
  $element.html($sanitize(value));
}

That solution trusts all elements that come with the $sce bundle so it's not useful for me :(

Any help will be appreciated, thanks!


Solution

  • Check this fiddle - http://jsfiddle.net/3J25M/764/

    Controller -

    angular.module('ngBindHtmlExample', ['ngSanitize'])
    .controller('ngBindHtmlCtrl', ['$scope','$sce', function($scope, $sce) {
        $scope.value = '<i><anotherelement>Hello World</anotherelement></i>';
        $scope.myHTML = $sce.trustAsHtml('<b ng-bind="value"></b>');
    }])
    .directive('compileTemplate', function($compile, $parse){
        return {
            link: function(scope, element, attr){
                var parsed = $parse(attr.ngBindHtml);
                function getStringValue() {
                    return (parsed(scope) || '').toString();
                }
    
                // Recompile if the template changes
                scope.$watch(getStringValue, function() {
                    $compile(element, null, -9999)(scope);  // The -9999 makes it skip directives so that we do not recompile ourselves
                });
            }
        }
    });
    

    HTML -

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

    Hope this helps!!