Tips on adding JWT token to image request

[mathias]

Hi folks,

We have an image db that keeps of track which user has uploaded an image, various product-related user rights etc.

For this purpose, we have a ds.xml that we will use to populate listgrids client-side. However, for fetching of the actual thumbnails and images, they are stored at an external service that utilizes JWT (Java Web Token)

Therefor, i need to figure out some way to piggyback the "image" listgridtype so that it fetches the image elsewhere and also attaches a Bearer token authentication http header to the requests.


Is this something that is supported somehow or do i have to code everything myself? Thoughts appreciated.

[Isomorphic]

ListGridField type "image" allows a fixed prefix and suffix in addition to the (potentially partial) URL stored in the record. If this doesn't allow you to assemble the URL you want, you can output your own <img> tag with a formatter, which is very simple.

[mathias]

Hey thanks for response. That's great however won't solve my problem. JWT requires a "Authentication" HTTP. Header, which is not part of the URL. Or am i missing something?

[Isomorphic]

There is no way to create an HTML <img> tag that sends arbitrary HTTP headers as part of its request.

So you have a couple of possible approaches:

1. introduce a server-side proxy that adds the header

2. use some fairly advanced direct JavaScript coding to retrieve the binary image data with an XMLHttpRequest, and turn the response into a base64 string that can then be assigned to an <img> tag via a "data:" URL. We don't have this area of browser functionality wrapped into neat Java / JavaScript APIs, and we haven't researched how well this works across browsers, so beware, it could get tough:

https://stackoverflow.com/questions/...ith-javascript

[mathias]

Thanks for your quick response, and yeah i've read up a bit more and as you say there are a bunch of (all cumbersome) options. Yet another seems to be to duplicate the AWS function to pre-sign all url's, but that means that i have to process all img links every time the listgrid is fetched...

anyways, thanks for your feedback, i'll figure something out. Might actually try to inject the img data :)

[mathias]

For others in the future that might be interested in this. I ended up setting a server-side cookie with a JWT token and expiry that is then automatically included when <src>-links are processed by the browser. Seems to work fine.