前端能直接对用户密码做哈希吗？这样安全吗？

雯雯 Dev 提问于 2026-03-10 12:50:21 阅读 66

安全

我最近在用 Vue 写一个登录页面，看到后端同事说密码要哈希存储，我就想能不能在前端先哈希再传给后端，省得传明文。但又听说这样其实不安全，有点懵。

我试了下用 crypto-js 在提交前处理密码，代码大概是这样：

<template>
  <input v-model="password" type="password" />
  <button @click="login">登录</button>
</template>

<script>
import CryptoJS from 'crypto-js'
export default {
  data() { return { password: '' } },
  methods: {
    login() {
      const hashed = CryptoJS.SHA256(this.password).toString()
      // 发送 hashed 给后端
    }
  }
}
</script>

但这样真的安全吗？会不会反而有风险？

密码哈希

我来解答赞 15 收藏

反馈

2 条解答

シ子璇 Lv1

前端直接对用户密码做哈希处理在理论上可以减少密码在网络传输过程中的风险，但实际上并不是特别安全。主要有两个问题：

一是如果攻击者能够获取到你的前端代码（比如通过查看网页源码），他们就能知道你使用的是哪种哈希算法，从而针对性地进行攻击。

二是前端代码容易受到XSS（跨站脚本攻击）的影响，攻击者可以注入恶意脚本窃取用户的密码或者哈希值。

所以一般这样处理的话，还是建议在前端只做一些基本的输入验证，然后将原始密码通过HTTPS安全传输到后端，由后端来负责密码的哈希和存储。这样可以更好地保护用户的密码安全。

不过如果你坚持要在前端做哈希，你的代码逻辑没问题，只是要注意上述的安全风险。代码看起来是这样的：

pre class="pure-highlightjs line-numbers">

import CryptoJS from 'crypto-js'



export default {

  data() { 

    return { password: '' } 

  },

  methods: {

    login() {

      const hashed = CryptoJS.SHA256(this.password).toString()

      // 这里发请求给后端，比如 axios.post('/api/login', { password: hashed })

    }

  }

}

记得确保你的API请求是通过HTTPS协议发送的。

2026-03-24 16:10

小弋焱 Lv1

前端做哈希其实是个有争议的做法，我来说说常见的处理方式。

你现在的做法在前端做SHA256哈希，比传明文确实好一点，但有几个坑要注意：

1. 这样只是把密码变成了固定长度的哈希值，本质上还是相当于在传"密码"，黑客拿到这个哈希值可以直接用来登录（这叫pass the hash攻击）

2. 如果没上HTTPS，中间人攻击照样能拿到你的哈希值

更安全的做法一般是：
前端传明文密码（必须用HTTPS），后端加盐再做哈希存储。因为后端可以做到：
- 每个用户用不同的盐值
- 使用专门设计的慢哈希算法（如bcrypt、PBKDF2）
- 可以灵活调整哈希强度

如果实在想在前端处理，至少应该：
1. 和后端约定好加盐方式（比如固定盐值+用户名）
2. 一定要配合HTTPS使用
3. 明确这只是二次防护，后端还是要做正规哈希

代码可以改成这样：

login() {

  const salt = '固定盐值' + this.username // 和后端约定好

  const hashed = CryptoJS.PBKDF2(this.password, salt, {

    keySize: 256/32,

    iterations: 1000

  }).toString()

  // 发送hashed

}

不过说实话，大厂现在基本都是直接传明文+HTTPS，把安全问题交给后端处理。前端搞哈希容易画蛇添足，除非有特殊需求。

2026-03-10 13:02