Angular Sanitize BadParse error
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?
In a little twist on this problem, the content is being used in an editable section of the application. In the snippet, you can see, we mark the div with the contentEditable attribute (this happens to be an angular directive, source for which can be found by searching), using ngBindHtml to set the content to be that returned from our CMS server (which we trust) and finally using ngModel to store the edited content. Again, we have the luxury of knowing our content comes from internal sources and is not written back with the users changes.