CODEWITHSUNDEEP
angularangular12angular-dom-sanitizer
webicy
webicy

Reputation: 1614

Angular 12 issue with DomSanitizer for src attribute in Iframe. always throw error for dynamicaly set source

I wanted to create a component that handles all YouTube embeded video. However passing the src as a variable will not work at all. No matter what I do. Anyone has an idea what's the problem or is it a bug from angular that needs fixing?

I have this in a parent template

   <ng-container *ngFor="let link of youtubeUrlList">
     <app-youtube-card [url]="link"></app-youtube-card>
   </ng-container>

And the child component template is :

 <iframe [src]="safeSource"></iframe>

and in the child component class :

 export class YoutubeCardComponent implements OnInit {

   @Input() url?: string  
   safeSource?: SafeResourceUrl
   constructor(private sanitizer: DomSanitizer) { }
  
   ngOnInit(){
     this.safeSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
   }
 }

and get this error

core.js:6456 ERROR TypeError: t.replace is not a function
    at HTMLIFrameElement.set (<anonymous>:5:5482)
    at EmulatedEncapsulationDomRenderer2.setProperty (platform-browser.js:739)
    at elementPropertyInternal (core.js:10006)
    at Module.ɵɵproperty (core.js:14764)
    at YoutubeCardComponent_ng_container_1_Template (youtube-card.component.html:3)
    at executeTemplate (core.js:9579)
    at refreshView (core.js:9445)
    at refreshEmbeddedViews (core.js:10570)
    at refreshView (core.js:9469)
    at refreshComponent (core.js:10616)

However i don't get that error if I put any of the youTube link directly in the iframe source attribute

Upvotes: 2

Views: 1022

Answers (1)

andry.failli
andry.failli

Reputation: 51

I encountered the same error and it was caused by a Chrome extension that was interacting in some way with the iframe behind the scenes.

In Chrome incognito or guest mode my code was working fine, I was facing the problem only when the extension was active.

You should try disabling all of your Chrome extensions.

Upvotes: 3

Related Questions