Auth0 - Client-side Download with Authorization Header

Help
, ,
1

I’m currently working on a project, and up until just recently Auth0 was working wonders for me. Ok - so really the problem I’m having is not truly with Auth0, but allow me to explain before I digress any further.

I have created protected routes in ExpressJS that require an Authorization Header to be sent along with any XHR request in order to access a route (role-based access control permissions). This works for most actions, but I’m having issues when it comes to downloading based on permissions.

In order to authenticate and authorize on my API, the client silently gets a token from Auth0 and sends that along in the header to the server, which verifies it and determines if the appropriate permissions belong to that user. If they do, it moves to the next item in the middleware and begins to process it (that is, it might begin the “download” operation of a given file, based on the route parameters).

Unfortunately, downloads cannot be natively initiated in client-side JavaScript code from a Fetch/AJAX/XHR request. The data will be sent over, but as an attachment without any download dialog. This must be done using an anchor tag with the download attribute set.

I’ve done a ton of research and seen some people converting the data to blobs and injecting tags into the DOM and programmatically initiating a download, but that limits file size to 500MB (the max blob size). I’ve also seen people use FileSaver and StreamSaver to handle some of this, but those are all sub-optimal solutions.

What interested me most was the idea of sending a token in the URL path and using that to verify the user and initiate the download. However, as of right now, everything I’m doing is through Auth0 headers (and I’ll be frank: I’m not a security expert, so I followed a tutorial).

Is it possible to safely send some type of Auth0 token through the URL without opening up security holes? If so, how would I consume that on the back-end (I’m using ExpressJS) to verify the permissions?

I appreciate any help anyone can give me!

2

I’ve recently had to solve the same problem. I’m not comfortable sending access token in the URL path or query string because it will be included in server logs and is generally poor practice IMO.

To resolve I implemented something similar to Loading images with JWT Authorization | by Armen Vardanyan | JavaScript in Plain English , however instead of the XHR request returning the data it returns a stateless pre-signed URL which is used to download the file without including any further authentication info. This works well for both images that should be rendered on the page and also downloads of files. In the latter case instead of an anchor tag with an href it’s effectively just an element with an onClick action to make the XHR request with header attached, then open up a new window with the URL that is returned.

Hope that helps