How to handle file downloads with JWT based authentication?

How to handle file downloads with JWT based authentication?

I’m writing a webapp in Angular where authentication is handled by a JWT token, meaning that every request has an “Authentication” header with all the necessary information.
This works nicely for REST calls, but I don’t understand how I should handle download links for files hosted on the backend (the files reside on the same server where the webservices are hosted).
I can’t use regular links since they won’t carry any header and the authentication will fail. Same for the various incantations of window.open(…).
Some solutions I thought of:

Generate a temporary unsecured download link on the server
Pass the authentication information as an url parameter and manually handle the case
Get the data through XHR and save the file client side.

All of the above are less than satisfactory.
1 is the solution I am using right now. I don’t like it for two reasons: first it is not ideal security-wise, second it works but it requires quite a lot of work especially on the server: to download something I need to call a service that generates a new “random” url, stores it somewhere (possibly on the DB) for a some time, and returns it to the client. The client gets the url, and use window.open or similar with it. When requested, the new url should check if it is still valid, and then return the data.
2 seems at least as much work.
3 seems a lot of work, even using available libraries, and lot of potential issues. (I would need to provide my own download status bar, load the whole file in memory and then ask the user to save the file locally).
The task seems a pretty basic one though, so I’m wondering if there is anything much simpler that I can use.
I’m not necessarily looking for a solution “the Angular way”. Regular Javascript would be fine.

Solutions/Answers:

Solution 1:

Here’s a way to download it on the client using the download attribute, the fetch API, and URL.createObjectURL. You would fetch the file using your JWT, convert the payload into a blob, put the blob into an objectURL, set the source of an anchor tag to that objectURL, and click that objectURL in javascript.

let anchor = document.createElement("a");
document.body.appendChild(anchor);
let file = 'https://www.example.com/some-file.pdf';

let headers = new Headers();
headers.append('Authorization', 'Bearer MY-TOKEN');

fetch(file, { headers })
    .then(response => response.blob())
    .then(blobby => {
        let objectUrl = window.URL.createObjectURL(blobby);

        anchor.href = objectUrl;
        anchor.download = 'some-file.pdf';
        anchor.click();

        window.URL.revokeObjectURL(objectUrl);
    });

The value of the download attribute will be the eventual file name. If desired, you can mine an intended filename out of the content disposition response header as described in other answers.

Solution 2:

Technique

Based on this advice of Matias Woloski from Auth0, known JWT evangelist, I solved it by generating a signed request with Hawk.

Quoting Woloski:

The way you solve this is by generating a signed request like AWS does, for example.

Here you have an example of this technique, used for activation links.

backend

I created an API to sign my download urls:

Request:

POST /api/sign
Content-Type: application/json
Authorization: Bearer...
{"url": "https://path.to/protected.file"}

Response:

{"url": "https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c"}

With a signed URL, we can get the file

Request:

GET https://path.to/protected.file?bewit=NTUzMDYzZTQ2NDYxNzQwMGFlMDMwMDAwXDE0NTU2MzU5OThcZDBIeEplRHJLVVFRWTY0OWFFZUVEaGpMOWJlVTk2czA0cmN6UU4zZndTOD1c

Response:

Content-Type: multipart/mixed; charset="UTF-8"
Content-Disposition': attachment; filename=protected.file
{BLOB}

frontend (by jojoyuji)

This way you can do it all on a single user click:

function clickedOnDownloadButton() {

  postToSignWithAuthorizationHeader({
    url: 'https://path.to/protected.file'
  }).then(function(signed) {
    window.location = signed.url;
  });

}

Solution 3:

I would generate tokens for download.

Within angular make an authenticated request to obtain a temporary token (say an hour) then add it to the url as a get parameter. This way you can download files in any way you like (window.open …)

Solution 4:

An additional solution: using basic authentication. Although it requires a bit of work on the backend, tokens won’t be visible in logs and no URL signing will have to be implemented.


Client Side

An example URL could be:

http://jwt:<user jwt token>@some.url/file/35/download

Example with dummy token:

http://jwt:eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIwIiwibmFtZSI6IiIsImlhdCI6MH0.KsKmQOZM-jcy4l_7NFsv1lWfpH8ofniVCv75ZRQrWno@some.url/file/35/download

You can then shove this in <a href="..."> or window.open("...") – the browser handles the rest.


Server Side

Implementation here is up to you, and is dependent on your server setup – it’s not too much different from using the ?token= query parameter.

Using Laravel, I went the easy route and transformed the basic authentication password into the JWT Authorization: Bearer <...> header, letting the normal authentication middleware handle the rest:

class CarryBasic
{
    /**
     * @param Request $request
     * @param \Closure $next
     * @return mixed
     */
    public function handle($request, \Closure $next)
    {
        // if no basic auth is passed,
        // or the user is not "jwt",
        // send a 401 and trigger the basic auth dialog
        if ($request->getUser() !== 'jwt') {
            return $this->failedBasicResponse();
        }

        // if there _is_ basic auth passed,
        // and the user is JWT,
        // shove the password into the "Authorization: Bearer <...>"
        // header and let the other middleware
        // handle it.
        $request->headers->set(
            'Authorization',
            'Bearer ' . $request->getPassword()
        );

        return $next($request);
    }

    /**
     * Get the response for basic authentication.
     *
     * @return void
     * @throws \Symfony\Component\HttpKernel\Exception\UnauthorizedHttpException
     */
    protected function failedBasicResponse()
    {
        throw new UnauthorizedHttpException('Basic', 'Invalid credentials.');
    }
}