angular2 custom modal component iframe issue

Question

• I have written custom modal component in angular2. In the modal I am opening third party html as iframe. I will have 1 or 2 buttons to open the modal(internally iframe). Facing issue only when I have 2 buttons.
• On 1st button click iframe launching without any issue. Onclick of 2nd button third party url link getting called twice & its failing.
• Because of security reasons 2nd invocation to 3rd party html is not allowed, as the request is going 2nd time in my case it is failing to load content.
• Sometimes even if the iframe link gets called single time still it is failing. So not getting what is the actual issue.
• As per analysis this maybe due to cache issue. How to stop caching in iframe. Or any advice is welcome.

Having below code in modal

<iframe [src]="third/party/url.html"></iframe>

Answer 1

For RC.6^ version use DomSanitizer

And a good option is using pure pipe for that:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html

<iframe width="100%" height="300" [src]="url | safe"></iframe>

For RC.5

You can leverage DomSanitizationService like this:

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

And then bind to url in your template:

<iframe width="100%" height="300" [src]="url"></iframe>

Don't forget to add the following imports:

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

Answer 2

in angular2+ you have to do check this for security reasons,

in html

 <iframe class="e2e-iframe-untrusted-src" [src]="url"></iframe>

and in .ts file in

constructor(private sanitizer: DomSanitizer) { }

url=this.sanitizer.bypassSecurityTrustResourceUrl(res.data.url);