Angular 6 trust only iframes in innerHtml

Question

I have an Api that responds with Html. I don't want to fully trust the content because of xss.

But sometimes I'll have Iframes in the response that I want to trust based on a whitelist.

I'm aware of the bypassSecurityTrustHtml() possibility but I didn't find out how to partially trust Html.

For example: Api response

<p>Some test text<br class='autobr' />\n<strong>some 
more</strong></p>\n<iframe 
src=\"https://player.vimeo.com/video/289729765\" width=\"640\" 
height=\"360\" frameborder=\"0\" webkitallowfullscreen 
mozallowfullscreen allowfullscreen></iframe>\n<p><a 
href=\"https://vimeo.com/289729765\">Mike Hopkins: The 
Backyard</a> from <a 
href=\"https://vimeo.com/diamondback\">Diamondback Bicycles</a> 
on <a href=\"https://vimeo.com\">Vimeo</a>.</p>\n<p>and the 
end</p>

Then I want to trust the Iframe only and display the whole text like this: <div innerHtml="myResponse"></div>

I tried extracting the iframe, trusting it and then replace it with the trusted SafeHtml. That didn't work. Is there any possibility to partially bypassSecurityTrustHtml()?

I am working with Angular 6...

Thx for your help

Answer 1

You are probably using the wrong Attribute Binding Syntax.

<div innerHtml="myResponse"></div>

Should have been

<div [innerHTML]="myResponse"></div>

PS - Not sure if that's just a typo or an actual syntax issue at your end.