#$sce

When rendering html, url or other security sensitive bindings, angular, by default, will parse the content in order to make it safe. If angular is not able to guarantee the safety of the content, it will throw an exception.

I ran into this behavior recently with an internal application. The application displays content from our content management system, and allows the user to edit the content. When certain contents were selected by the user, the angular app would raise an exception

‘The sanitizer was unable to parse the following block of html...’

The tried and trusted technique of searching google and stackoverflow, along with the angular documentation quickly gives the cause of the problem and the solution.

The problem, is that angular bindHtml directive cannot parse the html text it is being given, in such a way that the text can be deemed safe.

The solution can be either: fix the content ... or ‘trust’ the content

Have a look at the following gist:

https://gist.github.com/systemundertestcode/eeaf3f43e1ade74b97e7d2a8dc520dff

1. Determine what content is causing the ‘badparse’

If you examine the error in chrome developer tools, it will give you the text of the content that ngSanitize is failing to parse. This should be a useful start in determining exactly where in the application this content is being displayed (as often the stacktrace doesn’t lead directly to the location of the fail).

In this case, the bad content contains a templated url similar to  

‘sample.com?val=#{#variable1#}#&val2=#{#variable2#}#’

In my case, the ampersand symbol was causing the failure here. The $sce documentation mentions that ‘templated urls cannot be sanitized’.

2. Do you trust the content?

In my case, the content is coming from a trusted internal server. It’s not content that is created by end users and isn’t written back to the datastore for use later on ... so we can use the ‘trust’ this content. If you don’t trust the content, then  sorry, the rest of this article is probably not much help to you...

3. Create an angular filter to ‘trust’ the content

angular.module('app.filters').filter('trusted', function ($sce) { return function (html) { return $sce.trustAsHtml(html); } });

Strictly, the filter doesn’t mark the content as ‘trusted’, rather it creates a context object that the ngBindHtml directive both trusts, and knows how to render. This detail is really only important to you if you want the user to be able to edit the content.

4. Root out any other uses of the bad content

After applying the ‘trusted’ filter to the html template, I was still seeing the badParse error ?? 

Well it turned out that a number of other panels in the app were using / showing the content, so it was a matter of rooting these out and enabling the trusted filter at those points in the application.

5. What if the content is user editable?

Highlight Text In A String Using JavaScript And AngularJS

Have you ever wanted to highlight text in a string on a web page using AngularJS?  If your answer was no, don’t disregard, because you may one day need to.  The good thing is this is not very hard to accomplish.

There are many ways to do this using JavaScript, but we’re only going to examine one of those methods.

Using AngularJSand a few regular expressions (RegEx) with JavaScript, you can find…