CODEWITHSUNDEEP
javascripthtmlangulartypescriptdom
Matthew Dowell
Matthew Dowell

Reputation: 51

Is there a way to escape HTML strings THEN apply html markup in Angular?

I have a search form in Angular that receives an object from a database that contains an array of strings. I used pipe that would surround the query with <mark></mark> to the result string which would highlight the search query in the result, very handy. So far so good.

I am now trying return and highlight results that are html-type strings that contain html markup. Here comes the difficulty.

Simply displaying the results array will fail, because Angular with automatically sanitize the HTML. 

WARNING: sanitizing HTML stripped some content, see 
http://g.co/ng/security#xss

So I used an Angular safe pipe implementation here to bypass the sanitation: https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

return this.sanitizer.bypassSecurityTrustHtml(value);

At this point the HTML markup will render in the results, which is not good. So I built an Escape HTML pipe to convert the html into char codes... 

return value.toString().replace(new RegExp('/</g'), '&lt;').replace(new 
RegExp('/>/g'), '&gt;');

Binding to a component.html

{{result.value | safe: 'html' | escapehtml | highlight: 
this.search.get('query').value }}

Now my escaped html will display in the results, but the highlight pipe will be escaped as well showing <mark>query</mark> instead of highlighting the queried text.

Is there any approach in Angular here to get what I'm looking for(escaped HTML strings with html markup), or do I have to give up on my highlight pipe and just show the escapedHTML after sanitization?

Upvotes: 2

Views: 835

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21638

Nearly anything you come up with is going to introduce a security vulnerability that allows xxs injection. The best thing to do is split your string into 3 parts, start, highlight and end and render it with

{{start}}<mark>{{highlight}}</mark>{{end}}

Upvotes: 1

Related Questions