Question

假设我正在尝试使用Vue.js构建Web应用程序，其中最终用户使用表单来订阅新闻通讯。前端是Vue应用，后端是PHP REST API。

API需要基本身份验证。

在前端，我使用axios调用API：

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

您可以将Authorization标头值存储在localStorage或sessionStorage中。

使用interceptors来包含每个request的标题值

以下是示例：

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

  return config;
});

存储在LocalStorage中的Authorization标头的值将在每次发出HTTP请求时自动显示。

注意：将变量token替换为username和password

存储基本身份验证密码的最佳做法是什么？

3 个答案: