Какова наилучшая практика для хранения пароля Basic Auth?

Question

Допустим, я пытаюсь создать веб-приложение, используя Vue.js, где конечный пользователь использует форму для подписки на новостную рассылку.Внешний интерфейс - это приложение Vue, внутренний - PHP REST API.

API требует базовой аутентификации.

Во внешнем интерфейсе я вызываю API с помощью axios:

axios
    .post('localhost/api/v1/subscriber.php', {
        // I know the data is missing but this is not what the question is about..
        auth: {
            username: 'USER',
            password: 'PASS'
        }
    })

Все работает нормально, за исключением того, что Vue.js является JavaScript и поэтому виден на стороне клиента (щелкните правой кнопкой мыши -> Просмотреть / просмотреть исходный код страницы), и каждый конечный пользователь может видеть имя пользователя и пароль.

Как лучше всего хранить пароль (и имя пользователя)?Даже если PASS был хешированным паролем, конечный пользователь все равно сможет использовать его для вызова API самостоятельно ...

Answer 1

Рекомендуется не хранить пароль.Вы должны создать токен JWT на сервере, когда пользователь вошел в систему или зарегистрировался.Затем вы можете сохранить токен JWT на своем внешнем интерфейсе (локальное хранилище), когда вы получили токен от внутреннего интерфейса.

Простой способ шифрования . Вы можете зашифровать свой пароль с помощьюлюбой алгоритм шифрования на стороне клиента, а затем расшифровать на сервере с тем же ключом.

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

Приведенная ниже ссылка содержит всю подробную информацию о сквозном шифровании https://medium.com/@weblab_tech/encrypted-client-server-communication-protection-of-privacy-and-integrity-with-aes-and-rsa-in-c7b180fe614e

Answer 2

С моей точки зрения, у вас есть принципиальная проблема с дизайном вашего API.Кажется, что вы хотите предоставить интерфейсу некоторые глобальные учетные данные, чтобы SPA, в свою очередь, мог аутентифицироваться по API.Этот подход странен: либо конечная точка является общедоступной, и поэтому не требует аутентификации, либо она защищена, и каждый пользователь должен проходить аутентификацию должным образом.

Если вы просто хотите защитить API от спам-ботов и т. Д., Вы можете отправить nonce в приложение и проверить его в следующем запросе.Это ни в коем случае не является надежной защитой, но гарантирует, что каждому POST требуется GET и некоторый анализ на стороне спаммера.

Если вы хотите, чтобы ваши пользователи проходили аутентификацию по нескольким запросам, вы должны хорошо использоватьустановленные методы для обеспечения сеанса или функции запомнить меня.Это могут быть, например, файлы cookie сеанса (работают, но уязвимы для атак CSRF), JWT (с OAuth или без него) или что-то подобное.

Но что бы вы ни делали: не пытайтесь запутать общие учетные данные, которые вы передаете!

Answer 3

Вы можете сохранить значения заголовка авторизации в localStorage или sessionStorage.

Используйте interceptors, чтобы включить значения заголовка для каждого из ваших request

Вот пример:

axiosInstance.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  config.headers.Authorization =  token

  return config;
});

Значение заголовка Authorization, хранящегося в LocalStorage, будет автоматически при каждом выполнении HTTP-запросов.

Примечание. Замените переменную token с username и password