Why does AngularJS highlight data attributes when using ng-bind-html?

Question

I use the contentEditable div to allow users to format their articles. I process the content of html and save it.

I use ng-bind-html to render the result when viewers want to read the article. I don't want to use $sce.trustAsHtml because I still want AngularJS to misinform user input and because I don't trust all inputs. All I want is to disinfect AngularJS, to allow some attributes to the elements. It seems to separate the identifier and data attributes. (but retains class and title).

Are data attributes considered harmful? How can an attacker use them to attack an end user? And is there a way to use them safely and let Angular not cut them out?

Here is an example:

 article.body = '<p data-guid="afasfa-afasfafas-faf-asasf" class="guid-tagged">Yes this is my article</p>'; <article ng-bind-html='article.body'></article> 

Here Angular displays inside the article tag (note the truncated data attribute):

 <p class="guid-tagged">Yes this is my article</p> 

thanks

Answer 1

As stated in the comment, ng-bind-html transfers data through a sanitizer. This sanitizer removes a number of attributes from all the data entered into it. This problem can help explain more: ngSanitize is a problem associated with whitelisting attributes . This part of the source code includes all attributes considered valid and therefore left untouched by ngSanitize.

Answer 2

While Angular and ngSanitize commands sort this out, I found this topic useful to create a workaround. In particular, an answer speaking with a dynamically defined property .

Binding to is-open with this property, I was able to connect click handlers on the binding tags after ngSanitize completed the disinfection.

In this case, the HTML after disinfection, note that I use cite to store the target binding identifier, as this is one of the attributes that ngSanitize ignores. (You can try using href , but I would like to leave this alone):

Please see <a href='#' cite='#another_faq'>here</a>

The code in the installer for the property (see the link above) then processes the DOM events, which, it seems to me, contradict the Angular methodology, but sometimes you have to stop hitting your head and make it work:

if (isOpened) $('p.faq.answer').eq(item.position).find('a[cite]').each -> $(this).bind 'click', () -> $($(this).attr('cite')).click()

And then make sure that in this case you have the correct anchor with the target identifier #another_faq .