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

Question

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?

Adrian Brand · Accepted Answer · 2019-04-16 02:43:55Z

1

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}}

answered Apr 16, 2019 at 2:43

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related