Not using the base attribute when making DomSanitizer API calls?

Question

I'm making a call using the DomSanitizer like this:

        this.domSanitizer.bypassSecurityTrustResourceUrl(url));

The url is complete URL to the SVG image being fetched.

Here's is an example:

      this.matIconRegistry.addSvgIcon(
        "fs",
        this.domSanitizer.bypassSecurityTrustResourceUrl('https://github.com/fireflysemantics/images/blob/master/fsalpha/logo/fsalpha-logo-optimized.svg'));

However since base is set to another URL in index.html, the dom sanitizer URL is prefixed with it.

Is there a way to switch this off?

This is an article I wrote showing how it works without the base attribute added:

https://medium.com/@ole.ersoy/angular-material-icon-from-github-hosted-svg-logo-d5c35b923d

And this is a stackblitz that shows that when the base attribute is added, the call to the absolute URL is prefixed with the base attribute, so the URL passed becomes broken:

https://stackblitz.com/edit/angular-material-custom-icon-with-base?file=src/index.html

Feature Request

Angular has a feature request WRT to this issue:

https://github.com/angular/angular/issues/23139

Angular Issue

https://github.com/angular/angular/issues/34645

Screenshot of Bug

This is a screenshot of the stacktrace showing that the base URL is prefixed before the image URL:

Answer 1

This looks like a bug. There is no possible reason for the HttpClient to rewrite a URL which has a protocol.

Material icon registry doesn't mutate any of the URLs for icons. It doesn't really do anything special with the URL, and just defers loading to the HttpClient.

https://github.com/angular/components/blob/09dc4594259cf1d6b34a5a0893c0bccaa132c319/src/material/icon/icon-registry.ts#L595

I haven't been able to reproduce this, because it would require deploying an app to a domain like gh pages, but if you are seeing this happening then please open an issue on the Angular GitHub project and let them know.

The only answer that I can give you is to write a custom interceptor to fix the URL.

Here's a blog explaining how to use the interceptor to use a base URL. It's not a guide on how to fix your problem, but it's the closest thing that I could find.

http://www.projectcodify.com/angular-set-base-url-dynamically