这个适合我。

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

这个适合我。

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

更新v8

下面回答工作，但暴露您的应用程序的XSS安全风险! 与其使用this. domsaniizer . bypasssecuritytrustresourceurl (url)，不如使用this. domsaniizer .sanitize(SecurityContext. sanitize)。URL, URL)

更新

对于RC.6^版本使用DomSanitizer

砰砰作响

一个好的选择是使用纯管道:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

记得把你的新SafePipe添加到AppModule的declarations数组中。(详见文件)

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

html

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

砰砰作响

如果你使用嵌入标签，这可能对你很有趣:

如何使用angular2rc。6禁用消毒嵌入HTML标签显示PDF

旧版RC.5

你可以像这样利用DomSanitizationService:

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

然后在模板中绑定到url:

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

不要忘记添加以下导入:

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

砰砰作响的样本

这样我就可以使用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>

伙计们，就这些!!

我也遇到过这个问题，但为了在我的angular模块中使用安全管道，我安装了安全管道npm包，你可以在这里找到。仅供参考，这在Angular 9.1.3中是有效的，我还没有在其他版本的Angular中尝试过。下面是如何一步一步地添加它:

Install the package via npm install safe-pipe or yarn add safe-pipe. This will store a reference to it in your dependencies in the package.json file, which you should already have from starting a new Angular project. Add SafePipeModule module to NgModule.imports in your Angular module file like so: import { SafePipeModule } from 'safe-pipe'; @NgModule({ imports: [ SafePipeModule ] }) export class AppModule { } Add the safe pipe to an element in the template for the Angular component you are importing into your NgModule this way:

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

下面是一些在html元素中使用safePipe的具体例子:

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

我将分享这个解决方案，即使这不是最佳实践，但它发生在我身上，我们不允许使用this. domsaniizer . bypasssecuritytrustresourceurl (url)解决方案，因为一个自动安全警告停止了CI/CD管道。

@Component({
  template: '<iframe #iframeRef></iframe>'
})
export class UnsafeUrlBypassIframeSampleComponent implements AfterViewInit {
  @ViewChild('iframeRef') iframe: ElementRef<HTMLIFrameElement>;
  
  constructor(private renderer: Renderer2) {}
  
  ngAfterViewInit() {
    const MY_UNSAFE_URL = '/path/to/something';
    this.renderer.setProperty(this.iframe.nativeElement, 'src', MY_UNSAFE_URL);
  }
}

如果你确实需要绕过Angular的安全系统，而这将不可避免地导致漏洞，那么最好明确地这样做。