ng-bind-html - html with non-matching tags

[Kumar Devarakonda]

Hi

In our application, we need to display the emails read from uses inbox and display them in UI. Some of the emails are not formatted properly. 

When try to display, it displays message

Error: [$sanitize:badparse] The sanitizer was unable to parse the following block of html: <a href="http://www.facebook.com/AngloINFO.Bangkok" "_blank"="" target="_blank"><img src="http://apptestemaildata.sirahu.net/39844%3A0%3A1438?&AWSAccessKeyId=AKIAJEI7M6ZBESTUUDIA&Expires=1464136404&Signature=L%2BVDzGy61V4QdiP8POQpplfnj7Y%3D" alt="Join us on Facebook" border="0" width="144" height="30"></a>

here is that html

<a href="http://www.facebook.com/AngloINFO.Bangkok" "_blank"="" target="_blank"><img src="cid:hfacebook.gif" alt="Join us on Facebook" border="0" width="144" height="30"></a>

The incoming emails are unpredictable and we need to display in any case.

before using in ng-bind-html

we are using like this too

message = $sce.getTrustedHtml($sce.trustAsHtml(message));

and in html

we render like

              <div ng-bind-html="message">

              </div>

But it displays the above sanitize error. How to over come this?

Some of the solutions may be

1. while pulling from user inbox itself, parse html and correct it by using some java libraries like Jsoup, HtmlCleaner - but as the email text is unpredictable, we may lose some formatting etc..

[Sander Elias]

Hi Devarakonda,

WARNING: the following technique might run external code inside your app, and thus create a security risk, use on your own responsibility!

you can use the browser to create proper html out of an sting, however, this means that it gets fed into a dom element. This might lead to the above security risk.

do something like this: (code typed into the browser, not tested!)

function createHTML(rawHTML){
 var el = document.createElement('div')
 el.innerHTML = rawHTML
 // you can do 2 things now, return the element, and insert as it is,
 // or, read out the HTML and pass it to $sce. this might be a little safer.
 return el.innerHTML; //This HTML is prarsed by the browser, so most syntax error should be gone by now.
}

Does this help you somewhat?

Regards

Sander

[Kumar Devarakonda]

Hi Sander,

Thanks for the notes. I resolved this by using other javascript library (to insert missing tags) purifyjs - https://cure53.de/purify.js

Thank  you.

Regards,

Kumar

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.