How to hide or hash values inside a Javascript function?

Question

I am a graphic designer working on a website for my employer. At last minute, they have asked if it is possible to hide/reveal certain parts of a page dependent on whether the user types a specific email domain. After some research—given I am not an expert web developer—I figure out this bit of Javascript:

function validate()
{
  var text = document.getElementById("email_input").value;
  var formslist = document.getElementById ("forms");
  var regx = /^([a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]{3,20})+@(email1.com||email2.com)$/;
    if (regx.test(text))
    {
      forms.style.display = "block";
      document.getElementById("errortext").style.visibility="hidden";
    }
    else
    {
      forms.style.display = "hidden";
      document.getElementById("errortext").innerHTML="Our forms section requires an approved email address.";
      document.getElementById("errortext").style.visibility="visible";
      document.getElementById("errortext").style.color="gray";
    }
}

And it works! But common sense tells me this seems too simple to be secure... How can I hide/hash/mask "email1.com" or "email2.com"? How could I decrease the of odds of someone just going into the browser's developer view and seeing the accepted values?

(Sorry if I am repeating this question. I just can't figure out the correct search terms for what I want to do!)

There is no secure way to hide information only with Javascript. Anyone can inspect and modify the page and look at all of the available code. If you want to do this securely, the most common option is logged in users get served different data based on different criteria. This moves the display switch to the server, which users can't manipulate. — Andy Ray
– Andy Ray, Commented Mar 4, 2021 at 19:05

n-- · Accepted Answer · 2021-03-04 19:29:04Z

1

you can use digest method of Crypto API, and check the hashed input against the hashed email values

answered Mar 4, 2021 at 19:29

n--

3,8466 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

acaballero Over a year ago

This seems like an intriguing option. The link you sent is well laid-out and I will do some tests. I will update soon! Thank you :)

apsillers · Accepted Answer · 2021-03-04 19:42:19Z

What you want is probably not possible using only a client-side approach, or else a robust client-side approach is probably overkill.

A one-way hash function is a cryptographically sound approach to allow the client to check input without revealing what the desired input is. You can send a hashed value H(v1) without leaking information about v1 itself, and then have the client verify if the user's input v2 satisfies H(v1) == H(v2).

However, what is the client then to do after verifying a match? If it's going to display information to the user, that same information must be sent to the client before displaying it. Though the page may be cryptographically sound in it's decision of when to show the information on the page, any modestly savvy user may find that information using debug tools in the browser without making the page's script render it properly.

One actually cryptographically sound approach is to only grant the client access to the secret display-information in a form that has been encrypted with a symmetric-key cipher using the output of a key derivation function (KDF) like Encrypt(secretData, KDF(v1)), and attempt to perform the corresponding Decrypt(secretData, KDF(v2)) to decrypt the data using the user's input v2. It would probably be simpler to just send the input to the server and have it decide whether to send the secret data at all, but if you have no server (or no server that you trust with your secrets, or no server you believe will stay online for the useful life of your client application) then this is a viable approach.

zovorap · Accepted Answer · 2021-03-04 19:06:11Z

0

If you want this to be completely hidden from a "clever" user - you need to implement a backend validation. I don't see other good ways of doing this. Javascript that runs in browser can be easily read by a user and translated into a more human readable form. So, even if you encode your strings with btoa() - it can be decoded with atob(). Example - https://www.w3schools.com/jsref/met_win_atob.asp

answered Mar 4, 2021 at 19:06

zovorap

889 bronze badges

1 Comment

acaballero Over a year ago

Thank you for your reply! I will make sure to read the suggested documentation. Best regards, -Alejandro

Collectives™ on Stack Overflow

How to hide or hash values inside a Javascript function?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related