How to Securely Apply a Blur Effect to Images in an Angular App to Prevent User Manipulation?

I'm working on an Angular application where the images displayed contain sensitive information, and I want to apply a blur effect to these images. However, I don't want users to be able to inspect the page and remove the blur using browser developer tools.

What’s the best approach to ensure the blur effect is applied securely, so the blurred image cannot be easily manipulated or bypassed by users?

Specifically:

1. What’s the best way to apply the blur effect to images without allowing users to access the unblurred version?
2. Should the blur be applied on the frontend or the backend? Any recommendations?
3. What are the best practices to prevent users from inspecting and manipulating the blurred images?

Any ideas or suggestions would be greatly appreciated!

You can use authentication/authorization to display the unblurred image.

The simplest way is to store a generic blurred image in angular assets. When you make an API call and the user is unauthorized, show the blurred image. If not, the API will return the actual image.

The API call controls showing the image, based on the authentication token and permissions of the user.

Why would the actual document have to be blurred, when you can show a generic one, which is less of a hassle as a developer.