Làm cách nào để đặt <iframe src = trong thời gian tối thiểu> mà không gây ra ngoại lệ `không an toàn giá trị '?

Tôi đang làm việc trên một hướng dẫn liên quan đến việc thiết lập một iframe srcthuộc tính:

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

Điều này ném một ngoại lệ:

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

Tôi đã thử sử dụng các ràng buộc [src]mà không thành công.

Cập nhật v8

Dưới đây câu trả lời hoạt động nhưng làm cho ứng dụng của bạn gặp rủi ro bảo mật XSS! . Thay vì sử dụng this.sanitizer.bypassSecurityTrustResourceUrl(url), nên sử dụngthis.sanitizer.sanitize(SecurityContext.URL, url)

Cập nhật

Đối với phiên bản RC.6 ^, hãy sử dụng DomSanitizer

Plunker

Và một lựa chọn tốt là sử dụng đường ống tinh khiết cho điều đó:

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

nhớ thêm cái mới của bạn SafePipevào declarationsmảng AppModule. ( như đã thấy trên tài liệu )

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

html

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

Plunker

Nếu bạn sử dụng embedthẻ, điều này có thể thú vị đối với bạn:

• Làm thế nào với angular2 rc.6 vô hiệu hóa vệ sinh trên thẻ html nhúng hiển thị pdf

Phiên bản cũ RC.5

Bạn có thể tận dụng DomSanitizationServicenhư thế này:

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

Và sau đó liên kết urltrong mẫu của bạn:

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

Đừng quên thêm các mục nhập sau:

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

Mẫu Plunker

Cái này làm việc cho tôi

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

Điều này làm việc cho tôi đến 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>

đó là tất cả mọi người !!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

Tôi đã vật lộn trong 4 giờ. vấn đề là ở thẻ img. Khi bạn sử dụng dấu ngoặc vuông để 'src' ex: [src]. bạn không thể sử dụng biểu thức góc này {{}}. bạn chỉ cần đưa ra trực tiếp từ một ví dụ đối tượng dưới đây. nếu bạn đưa ra biểu thức góc {{}}. bạn sẽ nhận được lỗi nội suy.

1. Đầu tiên tôi sử dụng ngFor để lặp lại các quốc gia

   *ngFor="let country of countries"
   

2. thứ hai bạn đặt cái này vào thẻ img. đây là nó.

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

Tôi cũng gặp phải vấn đề này, nhưng để sử dụng một đường ống an toàn trong mô-đun góc của mình, tôi đã cài đặt gói npm ống an toàn, bạn có thể tìm thấy ở đây . FYI, điều này hoạt động trong Angular 9.1.3, tôi đã không thử điều này trong bất kỳ phiên bản nào khác của Angular. Đây là cách bạn thêm nó từng bước:

1. Cài đặt gói thông qua npm cài đặt ống an toàn hoặc sợi thêm ống an toàn. Điều này sẽ lưu trữ một tham chiếu đến nó trong phần phụ thuộc của bạn trong tệp pack.json, mà bạn nên có từ khi bắt đầu một dự án Angular mới.

2. Thêm mô-đun SafePipeModule vào NgModule.imports trong tệp mô-đun Angular của bạn như vậy:

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

3. Thêm đường ống an toàn vào một thành phần trong mẫu cho thành phần Angular mà bạn đang nhập vào NgModule theo cách này:

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

4. Dưới đây là một số ví dụ cụ thể về safePipe trong phần tử 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>

Tôi thường thêm các thành phần tái sử dụng đường ống an toàn riêng biệt như sau

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

Chúc mừng! ^^ Tôi có một giải pháp dễ dàng và hiệu quả cho bạn, vâng!

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

[attr.src] thay vì src "video.url" chứ không phải {{video.url}}

Tuyệt quá ;)