Sharing Top Content from the Angular-sphere.

Safe image requests in angular

  • Take this angular snippet for instance: – – Since the browser just loads this image through a normal HTTP call, how is the server supposed to know if user A or user B is trying to consume this image?
  • We could use session cookies, which kinda works like this: The user authenticates with the backend of our app, receives a session cookie which will be passed with every future request.
  • The previous snippet would now look like this: – – The url of the server request would now look like this: on the token, the server knows which user tries to load the image and can block unauthorized users of fetching that image.
  • There are a few tradeoffs: – – In this approach we will create a generic way of handling image-security by using: – – We would like to consume images like this: – – Let’s create a secured-image component as shown above.
  • Right now, every call that the secured-image component has initiated will load the image through AJAX with the right authorization header.

Since the browser just loads this image through a normal HTTP call, how is the server supposed to know if user A or user B is trying to consume an image? The server needs some kind of authorization to be passed to it. This article explains how to add security to images in Angular.

We all know how to load images in a web-application right? We would just make use of the img DOM-element, define its src attribute and we are good to go. Everything would happen automatically. However, there is a big security-issue with this approach.

Take this hypothetical application for instance: We have an app that is used to manage pictures and this particular app can have multiple users. It makes sense that every user owns their own images, right? For privacy reasons user A could never consume the images of user B. Since images are loaded through the DOM with the img DOM-element, it might be hard to add authorization there. Take this angular snippet for instance:

Since the browser just loads this image through a normal HTTP call, how is the server supposed to know if user A or user B is trying to consume this image? The server needs some kind of authorization to be passed to it.

We could use session cookies, which kinda works like this: The user authenticates with the backend of our app, receives a session cookie which will be passed with every future request. That way the backend knows who is trying to consume the resource in question.

Some could argue that session cookies are not to way the go, and stateless backends are better and more scalable. If we use JWT or any other modern authentication system we would rather send authorization-headers instead of using…

Safe image requests in angular

Comments are closed, but trackbacks and pingbacks are open.