Hiding client side variable

Coding Help
1

I want to hide a client side variable ( user can see it from inspector when js file is loaded)

here is link to my project (https://glitch.com/edit/#!/myblida?path=public/script.js:82:32)

2

Users will always be able to see client side variables if they go looking for them because they are the client, the browser is working for them not for your server.

In most cases client side variables, even if it’s a public key or something of that nature, are safe from a cryptography point of view because of how the algorithms behind security work, so you don’t really need to hide them from the user.

If you really wanted to make something harder (though still not impossible) for the user to find you could try having the client JS fetch the variable from the server and store it into the browser’s local storage. No idea if that would work, it’s just an idea.

3

You can, but if you’re using GET requests, then anyone can fetch the variable.

4

Right it is just another hurdle and a small amount of obfuscation, if it’s just a JS variable defined in the HTML or attached script it’s still just a GET request away regardless.

5

Thank you guys for your efforts, so do you have anyidea to hide it or workaround, what i am thinking is downloading the jequery js file to the server and edit it so i add that variable to it , it is a stupid move though the user won’t think about it i guess
what do you think ?

6

@iladan0 Moving this to the Coding Help section of the forums for you — you may get better answers here for code-related questions! :slight_smile:

I wouldn’t try modifying the jQuery (or any other) library to add a variable for a couple of reasons:

  1. It’ll make it harder to update the library to a newer version.
  2. It might break something in jQuery that will affect the rest of your site.
  3. It’s still a client-side variable, so it can still be found by anyone that looks in your page source.

You would be better off adding a secret to your .env file, and using it on the server side to generate whatever HTML/JavaScript you need and sending that back to the client. You can learn more about using an .env file in this help article!

1 Like
7

Thanks @angelo, i will take a look on that article

1 Like
8

Hey @angelo,

If you’re using Node,js, that would mean a GET request. But if we use a GET request, then anyone might be able to access those details, Until we put some sort of headers…

1 Like
9

can you please explain more about adding headers@khalby786

10

I don’t think headers might work with Express. Moral of the story: it’s not safe to hide variables in client-side.

11

What is the variable to be used for? What problem are you solving?

There are a bunch of methods that may be appropriate, for example, signatures, encryption, nonce, one-time-password, code lookup.

12

@khalby786 Not necessarily!

If the secret is being used to inject something into the rendered page, the server can figure that all out and return just the rendered page, without ever exposing the secret to the client. Think about an API key; the server makes a request to the API and authenticates with the key, gets back data, and sends the data back to the client — no secrets are sent along with it.

You can also use templating on the server side, like Pug or Handlebars to pre-render the HTML with whatever you needed the secret for already added, and then send that all back to the client.

The key takeaway, in either case, is that you use the secret on the server to complete a larger action (fetch data from an API, authenticate against a database, etc.), and the output of that action is what gets sent back to the user.

And, as I suggested in my earlier post, you should never keep the secret in your source code, whether that’s on the client side or the server side — keep it in your private .env file! :slight_smile:

2 Likes