Cannot display images in [innerHTML]

Question

I have HTML data stored in a field in my Firebase database, some of which contains <img src='[myImageUrl]'>. When displaying the field in my HTML file, the image has been blocked and I get the following message in my console:

GET unsafe:[myImageUrl] net::ERR_UNKNOWN_URL_SCHEME

Through a few days of research (both on stackoverflow and independent), I have implemented a pipe (below) to sanitize and bypass security, however I still have the same issue. Can someone shed some light on this issue and point me in the right direction towards a solution?

pub.html

<div [innerHTML]="((publication$ | async)?.body) | safeHtml "></div>

safeHtml.pipe.ts

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeValue } from '@angular/platform-browser';

@Pipe({name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform {
  constructor( private domSanitizer: DomSanitizer) {}

  transform(
    value: any,
    context: SecurityContext = SecurityContext.HTML,
  ): SafeValue | null {
    return this.bypassSecurityTrust(context, this.domSanitizer.sanitize(context, value) );
  }

  private bypassSecurityTrust(
    context: SecurityContext,
    purifiedValue,
  ): SafeValue | null {
    switch (context) {
      case SecurityContext.HTML:
        return this.domSanitizer.bypassSecurityTrustHtml(purifiedValue);
      case SecurityContext.STYLE:
        return this.domSanitizer.bypassSecurityTrustStyle(purifiedValue);
      case SecurityContext.SCRIPT:
        return this.domSanitizer.bypassSecurityTrustScript(purifiedValue);
      case SecurityContext.URL:
        return this.domSanitizer.bypassSecurityTrustUrl(purifiedValue);
      case SecurityContext.RESOURCE_URL:
        return this.domSanitizer.bypassSecurityTrustResourceUrl(purifiedValue);
      default:
        return null;
    }
  }
}

*** UPDATE *** This seems to be an issue with Firebase Storage. During testing, I hosted the same images on a separate implementation on Firebase and the images appear without any issue. I've confirmed that all setting on each implementation are identical. Not sure why this is happening, but it appears that my code is not an issue. If anyone else has had this problem, please let me know. Thanks

@connorsFan - I have, however I have the same issue. When displaying the image directly within the HTML file, there are no issues. Its only when using [innerHTML] that I have this issue — Remy Bartolotta, Jul 22 '20 at 18:35

score 1 · Accepted Answer · answered Jul 23 '20 at 03:38

After days trying to figure this out, I've finally fixed the issue. Not sure I would call this a proper solution as mich as a resolution. The problem arises from the way [innerHTML] renders the content of the field. When reading tag attributes, it adds quotations around the the attributes value.

For example, if your field contains <img src="http://some-image.png">, [innerHTML] renders <img src=""http://some-image.png"">. Note the duplication quotations are the src value. This causes the server to throw either and 403 Forbidden error or in some cases, an unsafe error.

The resolution is to simply remove the quotations from the value like so: <img src=http://some-image.png>. This is true with all tag attributes (src, class, id, etc).

This feels very 'hacky' and I'd love to find a real solution, but it works and allows me to move forwadr. I hope this helps anyone with the same issue.

Cannot display images in [innerHTML]

1 Answers1