CODEWITHSUNDEEP
javascriptcssreactjs
Leon
Leon

Reputation: 115

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

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?

Upvotes: 4

Views: 2117

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8098

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 :)

Upvotes: 1

GoodStuffing123
GoodStuffing123

Reputation: 172

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.

Upvotes: 2

Related Questions