Bagaimana cara mengatur <iframe src = "..."> tanpa menyebabkan pengecualian `nilai tidak aman`?

Saya mengerjakan tutorial yang melibatkan pengaturan iframe srcatribut:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

Ini melempar pengecualian:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

Saya sudah mencoba menggunakan binding [src]tanpa hasil.

Perbarui v8

Jawaban di bawah ini berfungsi tetapi mengekspos aplikasi Anda terhadap risiko keamanan XSS! . Alih-alih menggunakan this.sanitizer.bypassSecurityTrustResourceUrl(url), disarankan untuk digunakanthis.sanitizer.sanitize(SecurityContext.URL, url)

Memperbarui

Untuk versi RC.6 ^ gunakan DomSanitizer

Plunker

Dan pilihan yang baik adalah menggunakan pipa murni untuk itu:

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

ingatlah untuk menambahkan yang baru SafePipeke declarationslarik AppModule. ( seperti yang terlihat pada dokumentasi )

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

html

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

Plunker

Jika Anda menggunakan embedtag, ini mungkin menarik untuk Anda:

• caranya dengan angular2 rc.6 menonaktifkan sanitasi pada embed html tag yang menampilkan pdf

Versi lama RC.5

Anda dapat memanfaatkan DomSanitizationServiceseperti ini:

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

Dan kemudian ikat ke urldalam templat Anda:

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

Jangan lupa untuk menambahkan impor berikut:

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

Sampel plunker

Yang ini bekerja untuk saya.

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

Ini bekerja untuk 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>

itu semuanya !!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

Saya telah berjuang selama 4 jam. masalahnya ada di tag img. Saat Anda menggunakan braket persegi untuk 'src' ex: [src]. Anda tidak dapat menggunakan ungkapan sudut ini {{}}. Anda tinggal memberi langsung dari contoh objek di bawah ini. jika Anda memberikan ekspresi sudut {{}}. Anda akan mendapatkan kesalahan interpolasi.

1. pertama saya menggunakan ngFor untuk mengulangi negara

   *ngFor="let country of countries"
   

2. kedua Anda meletakkan ini di tag img. ini dia.

   <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
   height="20" width="20" alt=""/>
   

Saya mengalami masalah ini juga, tetapi untuk menggunakan pipa aman di modul sudut saya, saya menginstal paket npm pipa aman, yang dapat Anda temukan di sini . FYI, ini bekerja di Angular 9.1.3, saya belum mencoba ini di versi Angular lainnya. Inilah cara Anda menambahkannya langkah demi langkah:

1. Instal paket melalui npm install safe-pipe atau yarn add safe-pipe. Ini akan menyimpan referensi untuk itu dalam dependensi Anda di file package.json, yang seharusnya sudah Anda miliki dari memulai proyek Angular baru.

2. Tambahkan modul SafePipeModule ke NgModule.import di file modul Angular Anda seperti:

   import { SafePipeModule } from 'safe-pipe';
   
   @NgModule({
       imports: [ SafePipeModule ]
   })
   export class AppModule { }
   
   

3. Tambahkan pipa aman ke elemen dalam template untuk komponen Angular yang Anda impor ke NgModule Anda dengan cara ini:

<element [property]="value | safe: sanitizationType"></element>

4. Berikut adalah beberapa contoh spesifik safePipe dalam elemen html:

<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>

Saya biasanya menambahkan komponen reusable pipa aman terpisah sebagai berikut

# Add Safe Pipe

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

@Pipe({name: 'mySafe'})
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {
    }

    public transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

# then create shared pipe module as following 

import { NgModule } from '@angular/core'; 
import { SafePipe } from './safe.pipe';
@NgModule({
    declarations: [
        SafePipe
    ],
    exports: [
        SafePipe
    ]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module

@NgModule({
    declarations: [],
    imports: [
        SharedPipesModule,
    ],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
    <iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>

Selamat! ¨ ^^ Saya punya solusi yang mudah & efisien untuk Anda, ya!

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

[attr.src] bukan src "video.url" dan bukan {{video.url}}

Bagus ;)