Angular 5 Blocking iframe google maps

2
votes

I have the following iframe

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

the mapsurl is a secured url (https)

I am getting the following error:

ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) at DomSanitizerImpl.webpackJsonp.../../../platform-browser/esm5/platform-browser.js.DomSanitizerImpl.sanitize

I checked a few resources. The angular docs are insufferable as is usual. I am continuing to research will edit question with findings. Any help is prefered.

1
javascriptangulargoogle-mapsiframexss

1 Answers

2
votes

Use DomSanitizer

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

   constructor(public sanitizer: DomSanitizer){}

Then in the HTML:

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