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-01T08:15:59.800

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 01 '19 at 08:15

answered Sep 01 '19 at 07:43

nash11

8,220
3
19
55

getting null value in sanitizeImageUrl – mayur singhal Sep 01 '19 at 08:12
1

Sorry, I forgot to show the part where you need to add `DomSanitizer` to the constructor. Check out the updated answer. – nash11 Sep 01 '19 at 08:16
getting error "Not allowed to load local resource: file:///D:/1.jpg" – mayur singhal Sep 01 '19 at 08:29
1

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. (https://stackoverflow.com/a/46480984/9739129). – nash11 Sep 01 '19 at 08:38
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). – nash11 Sep 01 '19 at 08:43
This answer has a similar but more direct approach - https://stackoverflow.com/a/38083444/852806 (change `DomSanitizationService` to `DomSanitizer`). Note that when you call methods in the HTML, it will keep calling that method in a loop, so use sparingly to keep everything performant. – JsAndDotNet May 13 '21 at 12:37

Antoniossss · Answer 2 · 2019-09-01T07:27:51.083

-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 01 '19 at 07:27

answered Sep 01 '19 at 07:22

Antoniossss

31,590
6
57
99

i am adding my imge path in database then showing the image on other page by get api – mayur singhal Sep 01 '19 at 07:30
Moving images inside the project is not (if ever) a viable solution to the problem. – Yazan Khalaileh Nov 19 '20 at 06:48
Its just cannot be absolute path of your local files system, it must be web accessible. – Antoniossss Nov 19 '20 at 07:49

Getting unsafe URL error while displaying image

2 Answers2