如何在Angular 2中设置iframe src而不会导致`unsafe value`异常？

Question

我是没有AngularJS经验的Angular 2的新手,并且正在编写一个涉及设置iframe src属性的教程:

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

这引发了一个异常:

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

我已经尝试过使用绑定但iframe没有成功.我可能错过了一些东西,我很难找到解决方案.

Answer 1

更新

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

记得把你的新东西添加this.sanitizer.bypassSecurityTrustResourceUrl(url)到this.sanitizer.sanitize(SecurityContext.URL, url)AppModule 的数组中.(如文档所示)

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

HTML

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

Plunker

如果您使用SafePipe标签,这可能对您有意义:

• 如何使用angular2 rc.6在显示pdf的embed html标签上禁用sanitize

旧版RC.5

你可以declarations像这样利用:

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

然后embed在模板中绑定:

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

不要忘记添加以下导入:

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

Plunker样品

Answer 2

这个对我有用.

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

Answer 3

这适用于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>

多数民众赞成!

Answer 4

老实说，所有答案似乎都是错误的。仅使用this.sanitizer.bypassSecurityTrustResourceUrl(url)会绕过安全性并将 url 视为SafeResourceUrl. 但是，给定的 url 仍然可能是恶意的，从而导致安全违规。文档也这么说：https://angular.io/api/platform-b ​​rowser/DomSanitizer#bypassSecurityTrustResourceUrl

解决方案是首先调用并将返回值sanitizer传递给如下所示：sanitizerbypassSecurityTrustResourceUrl

this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, url))

这样您就可以清除任何恶意代码，然后绕过安全性，表明这确实是一个安全的网址。

Answer 5

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=""/>