Unable to view SVG image due to Content Security Policy error in Angular

I'm working on an Angular application where I'm trying to display an SVG image that has been uploaded to a blob storage. I am trying to display it using an tag and setting the [src] attribute to the blob URL of the SVG file. I'm getting a Content Security Policy error that says "Refused to load plugin data from 'url' because it violates the following Content Security Policy directive: 'default-src 'self''. Note that 'object-src' was not explicitly set, so 'default-src' is used as a fallback".This is the error message.UI of the issue which we are facing

This is the html :

<div class="image-container">
<img class="maxheight" [src]="imagebLOBURL" alt="Layout" />
</div>


This is the ts code:

this.imagebLOBURL = details.URL;


Initially the content-type of uploaded svg file was Content-Type: application/octet-stream then manually changed it to application/svg+xml and it started loading.

If we modify the content-type to application/svg+xml through code while uploading and then try to view the file we are getting CSP error on console. But if I click on the blob link directly, I will be able to view the image in the new tab.

Continue reading...