什么是Angular的SafeUrl

Question

documentation只说：

  

标记接口，可以安全地用作链接到文档的URL。

我应该何时使用SafeUrl？

Answer 1

您使用SafeUrl和DomSanitizer告诉Dom您的应用信任了一个网址。

  

Angular默认情况下将所有值视为不受信任。当值是   从模板插入DOM，通过属性，属性，样式，   类绑定或插值，Angular清理和转义   不值得信赖的价值观。

例如，执行以下操作将导致错误：

<iframe [src]="iframeSrc"></iframe>

在你的ts中

：

export class AppComponent  {
  iframeSrc: string;
  constructor(){
      let id = 's7L2PVdrb_8'; // Game of Thrones Intro Video
      this.iframeSrc = `https://www.youtube.com/embed/${id}`;
  }
}

  

资源URL上下文中使用的不安全值

为避免这种情况，您可以使用SafeUrl与DomSanitizer告诉应用您正在使用的动态网址是否可信：

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

export class AppComponent  {
    iframeSrc: SafeUrl;
    constructor(private sanitizer: DomSanitizer){
        let id = 's7L2PVdrb_8'; // Game of Thrones Intro Video
        let url = `https://www.youtube.com/embed/${id}`;
        this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

请参阅此working demo。