How to protect image URL from unauthenticated access in angular

Question

In my angular app, it has no,of image urls, how can protect those url from unauthorized access? for example the url can be copied and paste in to any browser(without authentication) or send anywhere.

so it makes any one can accessible. but I require to protect, as well i need to provide the access until the user logged in. is there any specific approach for angular or in general?

needs the advice. thanks in advance.

score 2 · Accepted Answer · answered Jan 05 '20 at 07:24

One way to overcome this is pass the token in your image url and validate the token from the backend. If its successful return the image.

www.samplesite.com/myImageUrl?token=123

The image tag will look something like this.

< img src="https://www.samplesite.com/myImageUrl?token=123" alt="sample">

score 1 · Answer 2 · answered Jan 05 '20 at 07:26

1

For unauthorized access, you can change your server settings to only serve static resources from a specific domain, block all other domain requests.
For images after login, you will have to do that by code and that would be a lot of work. Since, you will have to add a boolean to check if user has logged-in or not.

answered Jan 05 '20 at 07:26

Sagar More

466
2
8

The problem is, user want to copy paste the img url in to new window to see the full size. – 3gwebtrain Jan 05 '20 at 07:33
So, is the image not on your server or your domain? – Sagar More Jan 05 '20 at 08:25
my sever and domin only. it can be shared to anyone right? the other one will see without any auth is the concern – 3gwebtrain Jan 05 '20 at 08:27
You can set up cookie after user logs in and check if resources have that cookie valid or not and then serve resources. So even if user accesses a path but doesn't have valid cookie set he will now be able to see the images. – Sagar More Jan 05 '20 at 08:45

Tân · Answer 3 · 2020-01-05T07:44:14.107

Option 1:

You can display the image as blob, like this:

var location = 'https://images.unsplash.com/photo-1474511320723-9a56873867b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';

fetch(location).then(response => response.blob()).then(blob => {
    var url = URL.createObjectURL(blob);
    var image = document.createElement('img');

    image.src = url;

    document.body.appendChild(image);

    // your url will look like this:
    // blob:https://example.com/f347bbac-af35-40a8-ac2b-daf639faf2db
    // this url cannot be used on another domain
    console.log(url);
});

Option 2:

Move all of the images to the place that cannot be accessed directly. After signing in, whenever you need to display an image, just make a request to server. Then, server will return a file for the request.

Your_project
|_ wwwroot (public)
|_ Your image folder (private)
|__ folder01
|____ image01.png
|____ image02.png

Reference: Returning a file to View/Download in ASP.NET MVC

How to protect image URL from unauthenticated access in angular

3 Answers3