Arkan
Arkan

Reputation: 6236

How to authenticate requests to images in an angularJS app using an access_token

I have an angularJS application whose authentication system is made with an access_token and communicating with a backend server written in Go

Therefore to authenticate the user, I have to add the access_token to each request ?access_token=SomeTokenHere or via a header Access-Token: SomeTokenHere

It works great.

The issue is that my backend serves protected images, and I cannot put the access token in the image src for some security reasons(If the user copy/paste the link to someone else, the access_token would be given too ...)

What I'd like to do is to inject a header containing my access token, but since the request is made from the browser it doesn't possible.

This could probably be possible with a cookie, but I'd to avoid using a cookie especially because the angularApp and the backend are not on the same sub-domain.

Another idea would be to create a directive that would get the raw data, and set the data to the image. First I don't know if this is possible and is it a good idea for hundreds of images in the webpage ?

If you have any idea, I'd be glad to hear from you !

Thanks

Upvotes: 0

Views: 881

Answers (1)

Bogdan Savluk
Bogdan Savluk

Reputation: 6312

It is typical problem, and fortunately it was already solved - for example on Amazon S3.

Solution idea is simple: instead of directly using secret key - you can generate signature with access policy, using that key.

There is good algorithm designed especially to generate signatures for this purpose - HMAC

You can have one secret key on your server and use it to sign every image URL before it would be sent to client, also you can add some additional policies like url expiration time...

Upvotes: 1

Related Questions