Страница входа в HTML показывает учетные данные в источнике страницы

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

Хорошо, итак, я пытаюсь создать частный веб-сайт, к которому группа моих друзей имела бы доступ, никто другой не мог зарегистрироваться или войти в систему. Мой скрипт…

 <html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid amp; password*/
{
 /*the following code checkes whether the entered userid and password are matching*/
 if(form.userid.value == "myuserid" amp;amp; form.pswrd.value == "mypswrd")
  {
    window.open('target.html')/*opens the target page while Id amp; password matches*/
  }
 else
 {
   alert("Error Password or Username")/*displays error message*/
  }
}
</script>
</body>
</html>
  

Используя этот код, кто-то может открыть исходный код страницы и просмотреть учетные данные. Есть ли способ, которым я могу скрыть и зашифровать это, и, возможно, добавить несколько разных учетных записей?

Комментарии:

1. выполните проверку на стороне сервера

2. ДА. И только с HTML и JavaScript, нет.

3. все, что находится на стороне клиента, может быть просмотрено любым пользователем, именно так работает Веб. (Вы могли бы запутать свой код Javascript, но это не обеспечивает должной безопасности,) Все секретное должно быть сделано на стороне сервера.

4. О Боже, нет… font-family:Comic Sans

5. @j08691 Тссс, Ты ничего не видишь

Ответ №1:

Все, что вы пишете на клиентском JavaScript, потенциально может быть увидено другими пользователями в их браузере, по этой причине такие вещи, как аутентификация, должны обрабатываться на сервере.

Также важно знать, что вы никогда не должны хранить пароли в виде обычного текста.

Еще одна важная вещь, которую я вижу, читая ваш код, заключается в том, что я, вероятно, мог бы просто перейти кhttps://whatever.com/target.html и посмотрите страницу, которую вы пытаетесь защитить паролем.

Если вы заинтересованы в создании сайта с такой функцией, вам нужно будет использовать язык на стороне сервера и написать некоторый код для сервера.

Комментарии:

1. Вы знаете, как я мог бы это сделать?

2. Да, вам следует изучить некоторые серверные языки и, возможно, фреймворк. Для того, что вы пытаетесь сделать, PHP может быть хорошим местом для начала. Если вы уже знакомы с JavaScript, вы могли бы заглянуть в Node. Мой личный выбор для чего-то такого маленького был бы Python с Flask, однако неправильных вариантов не бывает.

3. На самом деле я использую node, это то, через что я его запускаю, я просто не знаю, где хранить учетные записи.

4. Я не большой разработчик узлов, но это похоже на хороший учебник: youtube.com/watch?v=gYjHDMPrkWU

Ответ №2:

Вы никогда не должны помещать конфиденциальную информацию в код на стороне клиента, поскольку это будет видно любому, кто просматривает исходный код страницы или проверяет элемент. Единственное, что вы должны проверять на стороне клиента, это такие вещи, как обязательные поля или действительный адрес электронной почты и так далее. Затем в скрипте на стороне сервера вы выполняете конфиденциальные проверки, подобные тем, которые вы сделали выше. Также я должен указать, что проверка пользователя с использованием оператора if является крайне плохой практикой. Вам следует больше работать над логикой вашего приложения на стороне сервера.

Комментарии:

1. Мой вопрос, как я могу это сделать?

2. @DerekHaber вам нужно использовать язык на стороне сервера, такой как PHP или asp.net или NodeJS … и интегрируйте его с вашим текущим кодом на стороне клиента. Отвечает ли это на ваш вопрос?

3. @DerekHaber серверная сторона обрабатывает все, от хранения форм до аутентификации. Поэтому я действительно советую вам выбрать язык и перейти на него. PHP — относительно простой язык для запуска и интеграции с существующими html и javascript.

4. @DerekHaber честно говоря, есть много очень полезных руководств по php о том, как создать хорошую систему безопасного входа и сеанса. Обычно они проводят вас через это шаг за шагом. Ответить на stack overflow непросто, поскольку в нем много шагов.

Ответ №3:

Самый простой способ выполнить аутентификацию на стороне сервера — это создать базовую HTTP-аутентификацию с использованием файлов .htaccess и .htpasswd.