Как реализовать защиту паролей на стороне клиента для веб-контента?

Question

Я пытаюсь защитить паролем часть страницы с помощью JavaScript. Пользователь будет видеть простое поле ввода и кнопку отправки, после ввода правильного пароля пользователь получит доступ к «скрытому» контенту.

В настоящее время нет способа просмотра «скрытого» контента, так как он скрывается каждый раз, когда происходит перезагрузка страницы (что происходит при отправке формы).

Да, я знаю, что это не считается «защитой паролем», поскольку пароль найден в самом js, но это не имеет значения для данного конкретного сценария.

Вот код, который у меня есть, спасибо за любую помощь.

<script language="JavaScript"> 
    window.onload=function(){ 
    var e = document.getElementById("hiddenContent"); 
    e.style.display = 'none'; 
}; 
function showPass(form){ 
    var pass = form.pwd.value; 

    if(pass == "password") { 
     e.style.display = 'block';  
    } 
} 
</script> 

<form action="#" onsubmit="showPass(form);return false"> 
Please Enter The Password: <input type="password" name="pwd" /> 
<input type="submit" value="Log In" /> 
</form> 
<div id="hiddenContent">Here is the Hidden content...</div> 

Как я могу получить скрытый контент после правильной отправки пароля?

Answer 1

Есть две проблемы, которые приводят к краху вашего кода и прекращают выполнение. Это заставляет вашу форму отправлять, чего вы не хотите, и ни один из ваших других кодов не работает.

onsubmit = "showPass (форма) должно быть onsubmit =" showPass (это)

е НЕ является глобальной переменной. Он закрыт анонимной функцией и не виден снаружи. Это означает, что showPass() не знает, что означает e. Изменить это

var e = document.getElementById ("hiddenContent");

к

е = document.getElementById ("hiddenContent"); (без вара ключевых слов)

или (возможно лучше) получить уникальную ссылку на этот элемент в showPass()