JWT-based authentication for <img> tags?

Question

Supposed I have a single page application that uses JWT tokens to authenticate against a backend REST api. I transfer the JWT token inside the http header when doing a REST request. So far, so good.

Now, supposed I want to download an image from the server, and I want the image only to be accessible for authenticated users. On the server, this is no problem: Simply define a route that delivers the image, and in that route verify the JWT token.

But: How do I transfer the token from the client to the server? If I use a regular <img ...> tag, I can not attach the token as an http header. What should I do?

I basically can think of adding the token, e.g. base64-encoded, to the query string, but that does not seem to be very secure, since the token then appears in the browser's history. On the other hand, I can not think of another approach, without loading images entirely using JavaScript.

Any hints?

Answer 1

If i think of Amazon S3 a signed url is what you want here. As you already suggested adding a token to the query string would be fine.

About security: I think this is a matter of the expiration date of the token. As there is no invalidation of the token maybe it is better to use signed URLs:

1. Get a JWT
2. Get a signed URL with that token
3. Use that URL to retrieve the img

This way you can control the expiration of the signed URL independent of the JWT and also define the length of the token used for the signed URL.