<İframe src = “…”> `güvenli olmayan değer` istisnasına neden olmadan nasıl ayarlanır?

Bir iframe srcöznitelik ayarı içeren bir öğretici üzerinde çalışıyorum :

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

Bu bir istisna atar:

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

Zaten [src]başarılı olmadan bağlamaları kullanmayı denedim .

Güncelleme v8

Aşağıdaki yanıtlar işe yarar ancak uygulamanızı XSS ​​güvenlik risklerine maruz bırakır! . Kullanmak yerine, kullanılması this.sanitizer.bypassSecurityTrustResourceUrl(url)tavsiye edilirthis.sanitizer.sanitize(SecurityContext.URL, url)

Güncelleme

İçin RC.6 ^ versiyon kullanımı DomSanitizer

Plunker

Ve bunun için iyi bir seçenek saf boru kullanmaktır:

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

Yeni eklemeyi unutmayın SafePipeiçin declarationsAppModule dizisi. ( dokümantasyonda görüldüğü gibi )

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

html

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

Plunker

embedEtiketi kullanırsanız bu sizin için ilginç olabilir:

• angular2 rc.6 ile nasıl pdf görüntüleyen gömülü html etiketi dezenfekte

Eski sürüm RC.5

Bu şekilde yararlanabilirsiniz DomSanitizationService:

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

Ve sonra urlşablonunuza bağlanın :

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

Aşağıdaki içe aktarmaları eklemeyi unutmayın:

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

Piston örneği

Bu benim için çalışıyor.

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

Bu beni Açısal 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>

tüm millet thats !!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

4 saattir mücadele ediyordum. sorun img etiketindeydi. 'Src' için köşeli ayraç kullandığınızda örnek: [src]. bu açısal ifadeyi {{}} kullanamazsınız. doğrudan aşağıdaki nesne örneğinden verirsiniz. {{}} açısal ifade verirseniz. enterpolasyon hatası alırsınız.

1. önce ülkeleri tekrarlamak için

   *ngFor="let country of countries"
   

2. İkincisi bunu img etiketine koyarsınız. budur.

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

Bu sorunla da karşılaştım, ancak açısal modülümde güvenli bir boru kullanmak için, burada bulabileceğiniz güvenli boru npm paketini kurdum . FYI, bu Angular 9.1.3'te çalıştı, bunu Angular'ın diğer sürümlerinde denemedim. Adım adım nasıl ekleyeceğiniz aşağıda açıklanmıştır:

1. Paketi npm kurulum emniyet borusu veya iplik ekleme emniyet borusu ile kurun. Bu, yeni bir Açısal proje başlatmanızdan önce sahip olmanız gereken paket.json dosyasındaki bağımlılıklarınızda ona bir başvuru depolar.

2. Angular modül dosyanızdaki NgModule.imports'a SafePipeModule modülünü aşağıdaki gibi ekleyin:

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

3. NgModule'nize içe aktardığınız Açısal bileşen için şablondaki bir öğeye güvenli boruyu ekleyin:

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

4. Bir html öğesinde safePipe'ın bazı spesifik örnekleri aşağıda verilmiştir:

<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>

Genellikle aşağıdaki gibi ayrı güvenli boru yeniden kullanılabilir bileşeni eklerim

# 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>

Tebrikler! ¨ ^^ Sizin için kolay ve verimli bir çözümüm var, evet!

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

{{video.url}} yerine "video.url" yerine [attr.src]

Harika ;)