angular 中嵌套 iframe 报错

Posted 2021-11-28 fuzitu

错误如下

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

解决

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

通过过滤器来解决 

使用

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