So we all have heard that we should learn from our mistakes, right?
Guess what, I learned from my mistake just recently.

We were in the dev of our new product and wanted to show the customer logo in the application when their users signed in, to make them feel right at home (guess who cooked that up 😌). The API guy for the project said,

“You have to request this endpoint, let’s call it the secured file endpoint POST /download/secured, to get the file.”

I said, “Ok, so how do I authenticate that?”
He said, “Give the JWT in the bearer token of the request.”

Yeah, makes sense, my mind replied.

Then I actually set up the code for the same and understood that all <img/> requests were made by the browser itself. No way I could use my interceptor.ts to intercept that request and apply the bearer token.

So I did what every good dev does, I overcomplicated it by setting up an Angular directive called securedImg directive to get this image to display inside the <img/>. And guess what, it worked (for a few weeks).

Then we needed to attach files to email threads that were being sent from the application. I said, “No problem, let’s add these images as base64 images in the text/html format. What could possibly go wrong?”

We tested an actual scenario, and one file then had 4 MB of image inside the body. It would work, but it would slow down every request and the application as a whole.

I reached out to the best guy I knew who could solve this problem for me (yes, ChatGPT). But I couldn’t find the results I was looking for. Then I went to Azure DevOps to see how they are securing the files I uploaded.

Surprisingly, the image opened in a private tab without any problem. Then it caught my eye, there were query parameters attached to the URL, which were used to authenticate the files.

I went straight to Visual Studio, cooked up an endpoint that would authenticate using a query param, and voila! The URL with the token passed as a query param was called by the browser, authenticated by the endpoint, and the image was returned successfully.

Lesson learned: Don’t reinvent the wheel, use it.