How to hide or hash values inside a Javascript function?

user_15331862 0
Viewed 161

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

security javascript
3 Answers

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

user_139939670

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.

user_7104460

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

user_83781910
Related