我正在做一个教程,涉及iframe src属性的设置:

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

这会抛出一个异常:

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

我已经尝试使用[src]绑定,但没有成功。


当前回答

祝贺!¨^ ^ 我有一个简单有效的解决方案给你,是的!

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

[attr。Src]而不是Src ”视频。而不是{{video.url}}

伟大的,)

其他回答

这样我就可以使用Angular 5.2.0了

fileName.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sample',
  templateUrl: './fileName.component.html',
  styleUrls: ['./fileName.component.scss']
})

export class FileName implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

fileName.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

伙计们,就这些!!

constructor(
 public sanitizer: DomSanitizer, ) {

 }

我已经挣扎了4个小时。问题出在img标签。当你使用方括号的'src' ex: [src]。你不能使用这个角表达式{{}}。你只要直接从下面的实物例子给出。如果你给出角表达式{{}}。你会得到插值误差。

首先,我用ngFor来迭代国家 *ngFor="让国家中的国家" 然后你把这个放到img标签里。就是它了。 < img (src) = " sanitizer.bypassSecurityTrustResourceUrl (country.flag)” Height ="20" width="20" alt=""/> .

祝贺!¨^ ^ 我有一个简单有效的解决方案给你,是的!

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

[attr。Src]而不是Src ”视频。而不是{{video.url}}

伟大的,)

说实话,所有的答案似乎都是错的。使用this. saniizer . bypasssecuritytrustresourceurl (url)仅绕过安全性,并将url视为SafeResourceUrl。但是,给定的url仍然可能是恶意的,导致安全违规。医生也这么说:https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustResourceUrl

一个解决方案是首先调用sanitizer,然后将sanitizer的返回值传递给bypassSecurityTrustResourceUrl,如下所示:

this.sanitizer.bypassSecurityTrustResourceUrl (this.sanitizer.sanitize (SecurityContext。URL、URL))

通过这种方式,您可以清除任何恶意代码,然后绕过表示这确实是一个安全url的安全性。

这个适合我。

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