在Vue中将密码字段绑定到数据对象属性是否安全？答案

【问题标题】：Is it safe to bind password field to data object property in Vue?在Vue中将密码字段绑定到数据对象属性是否安全？
【发布时间】：2020-12-31 05:42:55
【问题描述】：

这个问题让我很困扰。

假设我想构建一个登录组件以在我的应用程序（使用 Vue）中使用，其中有 2 个预期的输入字段，一个用于用户 ID，另一个用于密码。在这个问题的上下文中特别关注的是密码输入字段。

<input id="password" type="password" class="field-input">

我知道您可以使用 v-model 进行 2 路绑定（以及使用 v-bind 进行 1 路绑定），但问题是密码“应该”以这种方式绑定到数据对象吗？安全吗？这是否意味着密码以纯文本形式存储在数据对象中？如果这不是一种安全的方法，那么还有其他方法吗？

【问题讨论】：

如果您真的知道密码是什么，那么它根本不安全。您应该只存储哈希值并根据它验证密码

标签： javascript vue.js

【解决方案1】：

使用密码“应该”以这种方式将其绑定到数据对象吗？

绝对！根据 Vue documentation

Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases ... v-model internally uses different properties and emits different events for different input elements - text and textarea elements use value property and input event

使用下面的数据函数属性

data() {
  return {
    password: '',
  }
}

基本上<input type="password" v-model="password"> 是 <input type="password" v-bind:value="password" v-on:input="password = event.target.value">

这就像告诉电脑，

on input (event), update the value of the password property.

您只是将密码存储在您将通过表单发送的内存中（我假设）。

安全吗？

绝对！只要您采取其他预防措施，例如使用password（您是）的输入类型来防止有人在输入用户密码时窥探他们，请使用 HTTPS 在从客户端到服务器时散列所有详细信息，并且只要您使用 POST 请求（通过表单）发送密码，并进行适当的清理（修剪密码值，转义以减少注入攻击的机会等），正确的验证（使密码难以猜测等），散列（使用 bcrypt 或任何其他散列程序）并将密码存储在服务器端（数据库）以及 OWASP 推荐的其他一些最佳实践，你应该没问题。

有关 OWASP 身份验证最佳实践的更多信息，请参阅 [this] (https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)

这是否意味着密码会以纯文本形式存储在数据对象中？

它存储在内存中，但黑客无权访问它，只要您通过 POST 请求以经过充分验证和清理的形式通过 HTTPS 并使用上述其他预防措施发送它。

【讨论】：

【解决方案2】：

技术上你可以，但最好不要在客户端保存密码。

使用令牌。如果您想要一些复杂性和注意事项，请使用 JWT。但只需使用令牌。就像一个安全生成的字节列表，编码为字符串，然后将其作为 cookie 或 localStorage 保存在该客户端上，并与您的所有请求一起发送。

当用户输入用户名和密码时，您点击了授权 API 端点，如果凭据良好，您将在数据库中创建一个会话并将其与您创建的此安全令牌相关联。发出请求后，您可以查看会话并确保它仍然有效/未过期，并且您知道它属于哪个用户，以便他们“经过身份验证”。

另外，使用 HTTPS 并阅读有关授权与身份验证的信息。

【讨论】：