Search code examples
angularsanitizationhtml-sanitizing

Receiving dangerous URL error with sanitization

I have an Angular template that loads an iframe with a dymanic URL. Despite sanitizing the URL, I'm still receiving the error:

ERROR Error: Required a safe ResourceURL, got a URL

What am I missing?

component.ts

/**
 * Renders iframe for client to sign electronically by forming the URL based on the chosen externalDocument.
 * @param externalDocument
 */
selectDocument(externalDocument: IExternalDocument) {
  let document = new ExternalDocument(externalDocument)
  let url = document.url
  url = url.replace("INSERT_FIRSTNAME_HERE", this.firstName)
  url = url.replace("INSERT_LASTNAME_HERE", this.lastName)
  url = url.replace("INSERT_EMAIL_HERE", this.email)
  this.formattedUrl = url
}

component.html

<div style="display:block;margin:auto;padding:0;border:0;outline:0;font-size:12px!important;color:#AAA!important;vertical-align:baseline;background:transparent;width:90%;">
  <iframe frameborder="0" height="900" scrolling="yes" [src]="sanitizer.bypassSecurityTrustUrl(formattedUrl)" width="100%"></iframe>
</div>
Solution

  • See if bypassSecurityTrustResourceUrl works instead of bypassSecurityTrustUrl