Not using the base attribute when making DomSanitizer API calls?

强颜欢笑 提交于 2020-01-24 20:52:22

问题


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:


回答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



来源:https://stackoverflow.com/questions/59605333/not-using-the-base-attribute-when-making-domsanitizer-api-calls

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!