Getting unsafe URL error while displaying image

Question

Getting unsafe URL error in console while displaying an image in Angular 6

Here i am taking the image

<br>Primary Image <input type="file" (change)="readUrl($event)">

In the other component, I want my image to be shown

<tr *ngFor="let x of response">
    <td>
        <img [src]="x.productPrimaryImage">
    </td>
</tr>

Method to get the path of the image.

readUrl(event) {
    this.productPrimaryImage = event.target.value;
}

WARNING: sanitizing unsafe URL value C:\Users\mayursinghal\Pictures\Screenshot (9).png (see http://g.co/ng/security#xss)

nash11 · Accepted Answer · 2019-09-01 08:15:59Z

10

This is a warning given by Angular because your application can be exposed to XSS attacks. If you want to bypass this security warning, you need to first sanitize the URL to make it safe to display it in the UI. You can do this using the DomSanitizer (Source: docs).

Create a function to sanitize the image url in your component

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

...

constructor(private sanitizer: DomSanitizer) { }

sanitizeImageUrl(imageUrl: string): SafeUrl {
    return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
}

Then in your template, call this function to sanitize your URL.

<tr *ngFor="let x of response">
    <td>
        <img [src]="sanitizeImageUrl(x.productPrimaryImage)" />
    </td>
</tr>

WARNING: calling bypassSecurityTrustUrl with untrusted image URLs exposes your application to XSS security risks!

edited Sep 1, 2019 at 8:15

answered Sep 1, 2019 at 7:43

nash11

8,7503 gold badges23 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mayur singhal Over a year ago

getting null value in sanitizeImageUrl

nash11 Over a year ago

Sorry, I forgot to show the part where you need to add DomSanitizer to the constructor. Check out the updated answer.

mayur singhal Over a year ago

getting error "Not allowed to load local resource: file:///D:/1.jpg"

nash11 Over a year ago

This is your Chrome browser giving you an error. You should be ideally using cloud storage or host the images in some server and make your API return a relative path which along with the server path should give you the actual image. If you are using this particular method of getting the absolute image path to a local resource, maybe the plugin in this answer might help you out. (stackoverflow.com/a/46480984/9739129).

nash11 Over a year ago

Note: you cannot deploy anywhere using this image path and this method should be used only for testing or practicing. Else I suggest you use another method (I have mentioned some of them in the previous comment).

|

Antoniossss · Accepted Answer · 2019-09-01 07:27:51Z

-2

First, you are providing absolute path which will simply stop working after deployment. Move your images inside project and use relative urls like /images/Screenshot (9).png

Secondly, youse [src] instead

<img [src] = "x.productPrimaryImage">

edited Sep 1, 2019 at 7:27

answered Sep 1, 2019 at 7:22

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

3 Comments

mayur singhal Over a year ago

i am adding my imge path in database then showing the image on other page by get api

Yazan Khalaileh Over a year ago

Moving images inside the project is not (if ever) a viable solution to the problem.

Antoniossss Over a year ago

Its just cannot be absolute path of your local files system, it must be web accessible.

Collectives™ on Stack Overflow

Getting unsafe URL error while displaying image

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related