Restricting access to images

Hi, I was in need for a new javascript based framework. Ember sounded cool and so I gave it a shot. I am liking it so far, but I have a question about “the ember way” of doing certain things.

My app shall restrict access to certain resources, like images. So I figured I can not put them into a public assets folder like I would usually do for logos and stuff like that.

I am building access control using an access_token provided by ember simple auth. The back end is analysing this token and making its decisions about the users access rights based on it. So what I am doing in my adapter to send this token along with api requests is the following:

get headers() {
let headers = {};
if (this.session.isAuthenticated) {
  headers['Authorization'] = this.session.data.authenticated.access_token;
}
return headers;
  }

And this is fine for everything I do using ember-data. But what about images? I can do something like this to display an image: <img src={{this.image}} alt="alternative text">

and of course I could use ember-data to load or not load the src depending on whether the user is allowed to see the image or not. The problem is when the img is processed by the browser, it sends a GET directly to the server, bypassing ember-data. No access_token is present in this GET, so my server side ACLs can not be evaluated.

What I am attempting to do now is passing query parameters in the src attribute, so something like: <img src="localhost:4200/image/1?authorization=***my_access_token***" alt="alternative text">

This seems to work ok but I can imagine that it might mess with the browsers caching strategies a little and I am am not sure if this is the best way to go.

So is there some cool ember way to do this? I thought it is a fairly common requirement yet I was not able to find much about this topic.

PS. I know about the possibility to embed base64 encoded images, but I would rather not go down this rabbit hole.

Your approach sounds reasonable, haven’t seen anything Ember specific that would help solve that. If you were using a cookie it’d get handled for you, but because your auth is token based you have to work out some way of sending that token …

What I usually do is to do everything on back-end (Scala). Image has long id, that could be stored in database with real file name or the id could be a file name. During page loading, image is taken from back-end via proper query on back-end controller. Controller (or other service) loads file from disk (e.g. it could be your private place) only for authorized user (it is checked on back-end, on front-end I use ember simple auth). So example src could be src=“https://hostname/photos/MySoTfTtn108ytIQEHFWHjHrVvjyPmIMG_9227.JPG”.

Hi acorncom,

thank you for your feedback. So there is nothing ember specific for this. I like the stateless token approach, but looks like I will have to think about using cookies. My app will be image heavy and the ever changing token in the src URL will most probably render browsers unable to properly cache them. This increases the traffic and in effect will slow down the app for the user. Bummer.

Hi b-arto, thanks for your answer. For the most part this is exactly what I am doing. But the problem is, how does your server know that the incoming GET request is coming from an authorized user? There has to be some information within the request which lets you verify this. Are you using cookies?

Hi, I use ember simple auth with OAuth2PasswordGrantAuthenticator. It is enough for my case. I store “user session” with token and refresh token in data base. For incoming query I check access_token. It is for authentication. For authorization I check if found, authenticated user has role (RBAC tables in data base) to see the content.

Hi b-arto, ok, sorry if this is somehow obvious but this is the key problem for me. How do you check the access_token? So - you set your img to src=“https://hostname/photos/MySoTfTtn108ytIQEHFWHjHrVvjyPmIMG_9227.JPG”. The browser processes this and sends a GET to your server. Now what - where are you getting the information to map this request to the access_token to verify that it is in fact the authenticated user and not someone else? Is this information or the access_token itself in the headers of the request? If it is, how does it end up in there?

image PageController could be your ImageAccessController. RBAC-User tables could store name of group of images related to the user or file name, that could be visible for user.

Hi b-arto, thank you. I am sure this will help people looking into this problem. In order for the access token to be available in the GET of the image src attribute, you have to store it in a cookie. Otherwise it is not present in the request, unlike any other restricted page access which you can route through ember api. At least that is what I am doing now unless anyone else comes up with a way to put it in the headers. Edit: javascript - Authorization header in img src link - Stack Overflow