Правильный способ отправки заголовков аутентификации через ajax-запрос к API

Question

У меня есть форма, в которой я сохранил ключ авторизации в скрытом поле.

hidden_field_tag 'auth_key', Settings.biometric.auth_key

Я отправляю ajax-запрос в API, где я устанавливаю ключ авторизации в заголовке, для которого требуется ключ:

var authKey = $("input[id='auth_key']").val();
beforeSend: function (xhr) {
  xhr.setRequestHeader ("auth", authKey);
}

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

Я думаю, что это может быть неправильный способ сделать это Каков наилучший подход для этого?

Answer 1

TL; DR:

Любой, кто имеет доступ к клиентской стороне (он же ваш пользователь, использующий браузер), может в конечном итоге найти способ получить это auth_key, потому что клиент-пользователь имеет и всегда будет иметь доступ / доступ к каким «данным». "отправляется / принимается / сохраняется, особенно здесь, в веб-приложениях, благодаря встроенным инструментам разработчика браузера.

Некоторые объяснения:

Отказ от ответственности: я не очень разбираюсь в этой области, поэтому, если кто-то, пожалуйста, дайте мне знать.

• Да, он может быть зашифрован на стороне клиента, но пользователь / хакер может расшифровать их, потому что след "шифрования" можно найти где-то в вашем файле сценария JS:

  // application.js example
  ...beforeSend: function (xhr) {
    var encryptedAuthKey = localstorage.get('encrypted-auth-key');
    var decryptionPassword = 'abcd';
    var authKey = doSomeFancyDecryption(encryptedAuthKey, decryptionPassword);
    xhr.setRequestHeader ("auth", authKey);
  }
  

• Однако безопасным способом было бы зашифровать их с помощью пароля, хранящегося на стороне сервера, чтобы клиент не мог отладить / проверить / найти этот пароль в коде JS ... за исключением того, что это не так. возможно, см. ниже:

  // application.js example
  ...beforeSend: function (xhr) {
    var encryptedAuthKey = localstorage.get('encrypted-auth-key');
  
    var decryptionPassword = someFunctionThatPerformsAjaxRequestToServerAndReturnsTheDecryptionPassword();
    var authKey = doSomeFancyDecryption(encryptedAuthKey, decryptionPassword);
  
    function someFunctionThatPerformsAjaxRequestToServerAndReturnsTheDecryptionPassword() {
      // do some ajax request with Auth header equals Something...
      // ummm... what's the value of this something?
      // ummm... I cannot pass in my Username and Password, of course!
      // ummm... I cannot pass in another-kind of "auth_key", which just basically loops this process itself.
    }
  
    xhr.setRequestHeader ("auth", authKey);
  }
  

• Вы можете «подписать» свой запрос, чтобы вам больше не требовалось напрямую указывать auth_key как часть вашего запроса (но клиент-пользователь все еще может взломать его и получить ключ авторизации и сами создайте свой запрос именно потому, что они могут видеть и иметь доступ к вашему базовому коду, как показано ниже:

  // application.js example
  ...beforeSend: function (xhr) {
    var authKey = localstorage.get('auth-key');
    var params = // assign all input fields as key-values object here
    var url = this.url;
    var signature = generateSignatureUsingHMAC(authKey, url, params)
  
    xhr.setRequestHeader ("Signature", signature);
  }
  

Я бы лично сделал что-то вроде авторизации на основе подписи выше