How to securely transmit data (user access info) from node server to react client

Question

Just for a little background. We have a express based server and a React app which uses HTTPS connection with JWT tokens to authenticate user and send appropriate information over Authentication Headers.

However, once the user logs in, the server also needs to send access control information about the user for conditional rendering. Is there a way to hide this information from the browser. At present, when the user logs in, the response of the post call contains the roles pertaining to the user.

I'd like to know if there is a way to hide the information from dev tools. We are leaning towards webcrypto to encrypt the roles data on server side and send it to client, but just wondering if there is a better way. Or if I am overthinking.

Thank you.

Answer 1

No. If you fetch such information for the user dynamically, there is no way to hide it from the browser.

In the end, the user will have to decrypt the encrypted roles. A bad actor will simply check the JS responsible for this part and log the information as it's being decrypted. You cannot stop this without changing your architecture.

Answer 2

You cannot hide from the client any information the client will need. Even with cryptography.

Let's think about it: you have some tokens, and the client script will need the tokens in clear text. To stop someone to read the tokens, you encrypt them. Now nobody, not even the client script, can read it.

You need the client to read the tokens, so you send them the decryption key. Now anyone can decrypt the token, even people you don't want to see it.

Even if you send the encrypted token using one channel and the key using another, they have to come together to decrypt the token, and at this point the user can run Development Tools, put a breakpoint on the decryption function, and read or change the data freely.

You cannot protect a server-side resource using a client-side lock. It's like asking anyone at the door if they are allowed to enter. What you could do is to send the tokens in clear just to save time on the client by not rendering sections he will not have access, but checking at server-side if the user is allowed based on his profile alone, not on any token he sent.

Answer 3

In web application clients, we can give user access information in plain mode and instead secure our server API. my mean, although the user can see some pages (if they break their credential and change it) they don't seed any data in it. cause data is coming from our API and API should check the JWT and its user and check its permissions then return required pieces of information.