Angular 5阻止iframe谷歌地图答案

【问题标题】：Angular 5 Blocking iframe google mapsAngular 5阻止iframe谷歌地图
【发布时间】：2018-04-21 18:13:42
【问题描述】：

我有以下 iframe

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  [src]="mapsurl" allowfullscreen>
</iframe>

mapsurl 是安全 URL (https)

我收到以下错误：

ERROR 错误：资源 URL 上下文中使用了不安全的值（请参阅http://g.co/ng/security#xss）在 DomSanitizerImpl.webpackJsonp.../../../platform-browser/esm5/platform-browser.js.DomSanitizerImpl.sanitize

我检查了一些资源。像往常一样，角度文档令人难以忍受。我正在继续研究将用调查结果编辑问题。任何帮助都是首选。

【问题讨论】：

标签： javascript angular google-maps iframe xss

【解决方案1】：

使用 DomSanitizer

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

   constructor(public sanitizer: DomSanitizer){}

然后在 HTML 中：

    <iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(mapsurl)'  width="600"
  height="450"
  frameborder="0" style="border:0"
  allowfullscreen>
    </iframe>

【讨论】：

太棒了，谢谢。我看到了这一点，正在研究它并尝试实施。真的很欣赏！但是我在哪里导入 domsanitizer 应用程序模块？
很高兴这可以帮助你