How to Blur Images Server-Side in Angular with SSR to Prevent Client-Side Manipulation?

I'm working on an Angular application and using Server-Side Rendering (SSR). The Images displayed on my application contain sensitive information, and I want to apply a blur effect to these images before they are sent to the client. However, I don't want the users to be able to inspect the page and remove the blur using browser developer tools.

Is there a way to apply the blur effect on the server-side (before sending the images to the frontend) in an Angular app?

I'm considering using SSR to handle this, but I need guidance on how to implement this flow. Can anyone provide some insights or resources on how to set this up in an Angular app?

Specifically:

1. 
   How to use SSR to serve images that are already blurred?
   
   
2. 
   How to integrate image processing (like blurring) into an SSR Angular app?
   
   
3. 
   Best practices for ensuring that the blurred image is sent to the client and cannot be manipulated by the user?
   

Continue reading...