I’m trying to migrate my app from Electron to Angular, my goal is to show an image uploaded by a user and to do this I did this :
page.component.ts
uploadImageFile(){
fileDialog({}, files =>{ //I use the fileDialog library that returns a FileList
if(files[0])
{
this.filePath=URL.createObjectURL(files[0])
return this.sanitizer.bypassSecurityTrustUrl(this.filePath)
}else{console.log(":/"); return false};
})
}
page.component.html
img src="{{filePath}}" ngif="filePath" class="image2" width="200" height="250">
But the program returns this error:
WARNING: sanitizing unsafe URL value blob:http://localhost:4200/3f4bdf10-8080-4f4b-ba3f-15a7f85c6d69 (see https://g.co/ng/security#xss)
GET unsafe:blob:http://localhost:4200/3f4bdf10-8080-4f4b-ba3f-15a7f85c6d69 net::ERR_UNKNOWN_URL_SCHEME
Any advice on how to fix it?
Bypass security and trust the given value to be a safe for style URL and Resource URL
In this case you need to use bypassSecurityTrustUrl which means
a value that can be used in hyperlinks or
<img src>
bypassSecurityTrustResourceUrl which means
a location that may be used to load executable code from, like
<script src>, or<iframe src>.
I hope you are clear with this solution