Блог

Главная - Вопросы по программированию - HTML-страницы по-прежнему доступны без входа в систему

HTML-страницы по-прежнему доступны без входа в систему

#javascript #html #authentication

#javascript #HTML #аутентификация

Вопрос:

Я создаю сайт на Glitch.com для меня и моих друзей. Я уже знаю HTML / CSS и изучаю JS. Несмотря на то, что это не так безопасно, я хочу, чтобы система входа в систему была сделана из JS, поскольку этот проект просто для развлечения и улучшения моих навыков.

В настоящее время у меня есть страница входа в систему с HTML / CSS, и я написал несколько инструкций JS if для проверки входа в систему. Я хочу, чтобы пользователи, успешно вошедшие в систему, были перенаправлены на другую страницу, home.html .

Тем не менее, я все еще могу получить доступ home.html просто вставив /home.html до конца ссылки, не требующей входа в систему. Как мне это исправить?

HTML-код для входа в систему:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Login for Access</title>
    <link rel="stylesheet" href="/login.css">
    <script src="/login.js" defer></script>
  </head>  
  <body>
    
    <h1>Login for Access</h1>
    <p id = "access-denied">Incorrect User ID/Password</p>
    <form id = "login-form">
      <label for="user_id">User ID:</label>
      <input type="number" id="user_id" name="user_id" required><br><br>
      <label for="pwd">Password:</label>
      <input type="password" id="pwd" name="pwd" required><br><br>
      <input type="submit" value= "Submit" id = "login-submit">
    </form>
    
  </body>
</html>

JS — код:

 const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-submit");
const loginErrorMsg = document.getElementById("access-denied");

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const user_id = loginForm.user_id.value;
    const password = loginForm.pwd.value;

    if (user_id === "id" amp;amp; password === "pass") {
        window.location.href="home.html";
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

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

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

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

2. Я говорю, что это просто для развлечения, и я не собираюсь делиться ссылкой ни с кем, кроме моих друзей.

3. Хорошо. Затем, если вы не хотите, чтобы они могли использовать home.html страницу по URL, затем добавьте на эту страницу некоторую логику, которая запускается при первой загрузке страницы, чтобы проверить, авторизованы ли они, и измените местоположение на страницу, на которой им разрешено находиться (или скройте содержимое страницы и покажитесообщение об отказе в доступе). Просто имейте в виду, что любой может обойти его, если захочет, и это не требует специальных навыков.

Ответ №1:

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

Аутентификация / авторизация должна выполняться на стороне сервера.