Load protected image from API - ember.js

Question

I am using EmberJS along with ember-simple-auth and ember-data to authenticate and retrieve data from my API. One of my models contains properties that point to image URLs. I'd like to display these images in my app. I can do this using
<img class="thumbnail" src="{{user.thumbnail}}" />
The problem is that the images are protected and need an "Authorization" header to be set without which the API returns a 401. I thought about adding the token to the URL as a query parameter and modifying the API to accept it but it seems like a bad idea because the auth tokens will be present in the logs. Is there an EmberJS way of retrieving an image from a secured API?

Answer 1

EDIT based on your comment:
This is a server side solution so it would leave your ember code the way it is.
The approach is to never send the actual token with the images but use the token on the server to generate session specific image urls.
This way you never expose the absolute paths to your images but rather create relative urls that resolve to the absolute ones. You can use the session token as a key to an encryption algorithm like md5 and create the relative urls which would hide the sensitive information (such as the token) from the client, thus you would never send the token as the query parameter.
Note that this does mean that if the user is logged in and shares those image links, the images would be visible to anybody using the link until the user logs out (and his session is destroyed).
Previous suggestion
You could make a small component that does this for you where you pass in the url and either also pass the token or get it through an auth service. Then you use a computed property to combine the two. Here's a rough example:
// components/auth-img.js
export default Ember.Component.extend({
// passed in
class: '',
url: '',
token: '',
// local
tagName: 'img',
classNameBindings: ['class'],
attributeBindings: ['src'],
src: Ember.computed('url', 'token', function() {
let { url, token } = this.getProperties('url', 'token');
// combine your url and token and return
return // ...
})
});
And usage:
{{auth-img class="thumbnail" url=user.thumbnail}}