<div [innerHTML]=.... not working with iframe html> in angular2 html inject

Question

<div [innerHTML]="html"></div> isn't working when the html contains an Iframe. I've tried to do some security bypass with this.sanitizer.bypassSecurityTrustResourceUrl(..., but it still doesn't work.

Here's the demo with angular2 not injecting correctly.

Ankit Singh · Accepted Answer · 2016-07-19 04:13:35Z

31

Working PLUNKER

You need to use bypassSecurityTrustHtml for that, and need to assign and use the sanitized html like this

this.html = this.sanitizer.bypassSecurityTrustHtml(this.html);

answered Jul 19, 2016 at 4:13

Ankit Singh

25k12 gold badges68 silver badges90 bronze badges

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

2 Comments

Saiyaff Farouk Over a year ago

After the stable version of angular import { DomSanitizationService } from '@angular/platform-browser'; Should be import { DomSanitizer } from '@angular/platform-browser'; And change the injection in the constructor as well.

Pardeep Jain Over a year ago

I have added video URL in iframe, rendered fine but not working on Play, any reason?

Nimantha · Accepted Answer · 2021-11-15 04:54:39Z

8

DomSanitizationService is outdated from angular2 RC6

If you are using angular2 RC5 use this-

DomSanitizationService

If you are moving to angular2 RC6 use this-

DomSanitize

Here, is the complete example

import {DomSanitizer} from '@angular/platform-browser';

Then add in constructure

private sanitizer: DomSanitizer

and apply sanitizer on your variable like this

let text = <iframe width="977" height="733" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
text = this.sanitizer.bypassSecurityTrustHtml(text);
return text;

edited Nov 15, 2021 at 4:54

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Jul 31, 2019 at 6:22

Narendra Solanki

1,21216 silver badges22 bronze badges

Comments

Nimantha · Accepted Answer · 2021-11-15 04:53:57Z

2

this.sanitizer.bypassSecurityTrustHtml() takes string as input and makes it SafeHtml.I have done this in Angular 8.

edited Nov 15, 2021 at 4:53

Nimantha

6,5276 gold badges32 silver badges78 bronze badges

answered Apr 22, 2020 at 8:45

Progga Ilma

6337 silver badges10 bronze badges

Collectives™ on Stack Overflow

<div [innerHTML]=.... not working with iframe html> in angular2 html inject

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related