วิธีการตั้งค่า <iframe src =“ …”> โดยไม่ทำให้เกิดข้อยกเว้น `ค่าที่ไม่ปลอดภัย '

ฉันกำลังทำงานเกี่ยวกับการสอนเกี่ยวกับการตั้งค่าของiframe srcคุณลักษณะ:

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

สิ่งนี้ทำให้เกิดข้อยกเว้น:

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

ฉันได้ลองใช้การผูก[src]โดยไม่ประสบความสำเร็จ

อัพเดท v8

คำตอบด้านล่างใช้งานได้ แต่ทำให้แอปพลิเคชันของคุณเสี่ยงต่อความปลอดภัยของ XSS! . แทนที่จะthis.sanitizer.bypassSecurityTrustResourceUrl(url)แนะนำให้ใช้this.sanitizer.sanitize(SecurityContext.URL, url)

ปรับปรุง

สำหรับRC.6 ^เวอร์ชั่นให้ใช้DomSanitizer

Plunker

และตัวเลือกที่ดีคือการใช้ท่อบริสุทธิ์สำหรับสิ่งนั้น:

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

อย่าลืมเพิ่มรายการใหม่SafePipeลงในdeclarationsอาร์เรย์ของ AppModule ( เท่าที่เห็นในเอกสาร )

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

HTML

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

Plunker

ถ้าคุณใช้embedแท็กนี้อาจจะน่าสนใจสำหรับคุณ:

• วิธีการที่มี angular2 rc.6 ปิดการใช้งานฆ่าเชื้อในแท็ก html ฝังซึ่งแสดงไฟล์ PDF

RC.5 เวอร์ชันเก่า

คุณสามารถใช้ประโยชน์DomSanitizationServiceเช่นนี้:

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

แล้วผูกเข้ากับurlเทมเพลตของคุณ:

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

อย่าลืมเพิ่มการนำเข้าต่อไปนี้:

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

ตัวอย่างพลั่ว

อันนี้ใช้ได้สำหรับฉัน

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

สิ่งนี้ใช้ได้กับ 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>

นั่นคือคนทั้งหมด !!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

ฉันดิ้นรนมา 4 ชั่วโมง ปัญหาอยู่ในแท็ก img เมื่อคุณใช้วงเล็บเหลี่ยมเป็น 'src' ex: [src] คุณไม่สามารถใช้นิพจน์เชิงมุมนี้ {{}} คุณเพียงแค่ให้ตัวอย่างโดยตรงจากวัตถุด้านล่าง ถ้าคุณให้การแสดงออกเชิงมุม {{}} คุณจะได้รับการแก้ไขข้อผิดพลาด

1. ก่อนอื่นฉันใช้ ngFor เพื่อย้ำประเทศ

   *ngFor="let country of countries"
   

2. อันดับที่สองที่คุณใส่ไว้ในแท็ก img นี่ไง.

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

ฉันวิ่งเข้าไปในปัญหานี้เช่นกัน แต่เพื่อที่จะใช้ท่อปลอดภัยในโมดูลเชิงมุมของฉันฉันติดตั้งแพคเกจ NPM ปลอดภัยท่อซึ่งคุณสามารถหาได้ที่นี่ FYI, สิ่งนี้ทำงานใน Angular 9.1.3, ฉันไม่ได้ลองใน Angular รุ่นอื่น นี่คือวิธีที่คุณเพิ่มทีละขั้นตอน:

1. ติดตั้งแพคเกจผ่าน npm ติดตั้ง safe-pipe หรือ yarn add safe-pipe สิ่งนี้จะเก็บการอ้างอิงไว้ในการอ้างอิงของคุณในไฟล์ package.json ซึ่งคุณควรจะเริ่มต้นโครงการ Angular ใหม่แล้ว

2. เพิ่มโมดูล SafePipeModule ไปยัง NgModule.imports ในไฟล์โมดูล Angular ของคุณดังนี้:

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

3. เพิ่ม pipe ปลอดภัยไปยังองค์ประกอบในเทมเพลตสำหรับองค์ประกอบ Angular ที่คุณกำลังนำเข้าสู่ NgModule ด้วยวิธีนี้:

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

4. นี่คือตัวอย่างเฉพาะของ safePipe ในองค์ประกอบ 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>

ฉันมักจะเพิ่มส่วนประกอบที่นำกลับมาใช้ท่อปลอดภัยที่แยกต่างหากดังนี้

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

ยินดีด้วย! ¨ ^^ ฉันมีทางออกที่ง่ายและมีประสิทธิภาพสำหรับคุณใช่!

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

[attr.src] แทน src "video.url" และไม่ใช่ {{video.url}}

เยี่ยมมาก;)