Is there a way to let users view blurred content only in React?

Question

I would like to blur out some content on the webpage from users who don't have the proper authorization to view them. Currently, I am using inline CSS style to filter the content:

<div style={{ filter: 'blur(8px)', pointerEvents: 'none' }}>{the content}</div>

However, users can easily edit the CSS and disable it in browser developer tools like Chrome DevTools. I was wondering if I can achieve the blurred effect and also prevent users from editing them by other methods?

Answer 1

Check if the user is not authorized, then instead of showing a blurred version of the content, show a blurred version of lorem ispum or just a bunch of zeros. Something like that.

Answer 2

You can use the ternary logic within your JSX to show data as below:

 {
   authorized ?  // From Backend Authorized
   (<p>Content to be shown to the authorized users</p>)
  :(<div style={{ filter: 'blur(8px)', pointerEvents: 'none' }}>
     any other jibbisrh content also blurred
   </div>)
  }

Now even if the unauthorized users play with the content, that is just jibbirish :)