iframe not working in angular 5 it is showing the html contents

Question

Here is the content that showing, i am trying to display the youtube content on my website but its not showing

Here the html that displaying on the browser

<iframe width="480" height="270" src="https://www.youtube.com/embed/HK6B2da3DPA?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

Im using the following to bind that value:

<div class="text-center"> {{articleDatils.raw_content_path}} </div>

<div class="text-center"> {{articleDatils.raw_content_path}} </div> — Vijay Prajapati
– Vijay Prajapati, Commented Jul 15, 2018 at 18:54
You'll need to bind to the innerHTML property. Take a look at stackoverflow.com/questions/34585453/… — user184994
– user184994, Commented Jul 15, 2018 at 18:56
You need to convert it to safe HTML as well. stackblitz.com/edit/… — user184994
– user184994, Commented Jul 15, 2018 at 19:04

Harsh Mandalgi · Accepted Answer · 2019-06-26 05:28:54Z

3

You need to sanitize the URL before using it in iframe. This need to be done beacause it helps to prevent Cross Site Scripting, i.e. it prevents attackers from injecting malicious client-side scripts into web pages, which is often referred to as Cross-site Scripting or XSS.

This method worked for me:

Import this header file:

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

I created a function as:

getUrl(post)
{
  return this.sanitizer.bypassSecurityTrustResourceUrl('https://'+ post.url +'/');
}

Then in the template:

<div  class="iframe-container d-none d-lg-block">
   <iframe [src]='getUrl(post)'>
      <p>Your browser does not support iframes.</p>
   </iframe> 
</div>

answered Jun 26, 2019 at 5:28

Harsh Mandalgi

2042 silver badges5 bronze badges

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

1 Comment

packmul3 Over a year ago

You will need sanitizer: DomSanitizer; in your class definition

Collectives™ on Stack Overflow

iframe not working in angular 5 it is showing the html contents

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related