How to set <iframe src="..."> without causing `unsafe value` exception?

Update v8

Below answers work but exposes your application to XSS security risks!.Instead of using this.sanitizer.bypassSecurityTrustResourceUrl(url), it is recommended to use this.sanitizer.sanitize(SecurityContext.URL, url)

Update

For RC.6^ version use DomSanitizer

Plunker

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);  }} 

remember to add your new SafePipe to the declarations array of the AppModule. (as seen on documentation)

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

html

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

Plunker

If you use embed tag this might be interesting for you:

• how with angular2 rc.6 disable sanitize on embed html tag which display pdf

Old version 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';

Plunker sample

This one works for me.

import { Component,Input,OnInit} from '@angular/core';import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';@Component({    moduleId: module.id,    selector: 'player',    templateUrl: './player.component.html',    styleUrls:['./player.component.scss'],    })export class PlayerComponent implements OnInit{    @Input()    id:string;     url: SafeResourceUrl;    constructor (public sanitizer:DomSanitizer) {    }    ngOnInit() {        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);          }}

This works me to Angular 5.2.0

sarasa.Component.ts

import { Component, OnInit, Input } from '@angular/core';import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';@Component({  selector: 'app-sarasa',  templateUrl: './sarasa.component.html',  styleUrls: ['./sarasa.component.scss']})export class Sarasa implements OnInit {  @Input()  url: string = "https://www.mmlpqtpkasjdashdjahd.com";  urlSafe: SafeResourceUrl;  constructor(public sanitizer: DomSanitizer) { }  ngOnInit() {    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);  }}

sarasa.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

thats all folks!!!