Comment cacher ou hacher des valeurs à l'intérieur d'une fonction Javascript ?

Question

Je suis graphiste et je travaille sur un site web pour mon employeur. A la dernière minute, ils m'ont demandé s'il était possible de cacher/révéler certaines parties d'une page selon que l'utilisateur tape ou non un domaine email spécifique. Après quelques recherches - car je ne suis pas un développeur web expert - j'ai trouvé ce petit bout de 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";
    }
}

Et ça marche ! Mais le bon sens me dit que cela semble trop simple pour être sûr... Comment puis-je cacher/cacher/masquer "email1.com" ou "email2.com" ? Comment puis-je réduire les chances que quelqu'un aille simplement dans la vue développeur du navigateur et voit les valeurs acceptées ?

(Désolé si je répète cette question. Je n'arrive pas à trouver les termes de recherche corrects pour ce que je veux faire).

Answer 1

Vous pouvez utiliser digest méthode de Crypto API et vérifiez l'entrée hachée par rapport aux valeurs hachées des courriels

Answer 2

Ce que vous voulez n'est probablement pas possible en utilisant uniquement une approche côté client, ou alors une approche côté client robuste est probablement superflue.

Une fonction de hachage à sens unique est une approche cryptographique solide qui permet au client de vérifier une entrée sans révéler l'entrée souhaitée. Vous pouvez envoyer une valeur hachée H(v1) sans divulguer d'informations sur les v1 lui-même, puis demander au client de vérifier si l'entrée de l'utilisateur v2 satisfait H(v1) == H(v2) .

Cependant Que doit faire le client après avoir vérifié la concordance ? S'il doit afficher des informations à l'utilisateur, ces mêmes informations doivent être envoyées au client avant d'être affichées. Bien que la page puisse être cryptographiquement saine dans sa décision de montrer l'information sur la page, n'importe quel utilisateur modestement avisé peut trouver cette information en utilisant des outils de débogage dans le navigateur sans que le script de la page ne la rende correctement.

Une approche cryptographiquement valable consiste à n'accorder au client l'accès aux informations d'affichage secrètes que sous une forme qui a été cryptée à l'aide d'un algorithme de chiffrement à clé symétrique utilisant la sortie d'une fonction de dérivation de clé (KDF) du type Encrypt(secretData, KDF(v1)) et tenter d'exécuter la Decrypt(secretData, KDF(v2)) pour décrypter les données à l'aide de l'entrée de l'utilisateur v2 . Il serait probablement plus simple d'envoyer l'entrée au serveur et de le laisser décider de l'envoi des données secrètes, mais si vous n'avez pas de serveur (ou pas de serveur auquel vous confiez vos secrets, ou pas de serveur dont vous pensez qu'il restera en ligne pendant la durée de vie utile de votre application client), il s'agit d'une approche viable.

Answer 3

Si vous voulez que cela soit complètement caché à un utilisateur "intelligent", vous devez mettre en place une validation en arrière-plan. Je ne vois pas d'autres moyens de le faire. Le Javascript qui s'exécute dans le navigateur peut être facilement lu par un utilisateur et traduit dans une forme plus lisible par l'homme. Ainsi, même si vous encodez vos chaînes de caractères avec du btoa() - il peut être décodé avec atob() . Exemple - https://www.w3schools.com/jsref/met_win_atob.asp