在前端对登录密码进行加密,md5+盐值

简介: 在前端对登录密码进行加密,md5+盐值

在前端对登录密码进行加密,md5+盐值

场景:前端制定规则账号密码,后端不进行参与,完全就是前端进行校验

缺点:对于现在网络发达的时代,大部分人随便攻击你的网站就可以看到你的账号密码这样就可以轻松进入你的网站、不安全。

优点:基本没有,除非就是临时搭建 不需要后端

当然这是我开发时候的场景 大家在和后端进行加密的时候也可以使用这套加密逻辑是一样的

了解MD5

其实在MD5之前还有MD4和MD2 他们都是算法 经过一代一代的迭代

MD5的特点

1.长度固定:无论多长的字符串,加密后长度都是一样长。

2.方便使用:我们可以直接下载MD5的包 可以直接使用md5("加密内容")

3.不可逆性:基于这个不可逆性大大的提高了安全性

亿点小知识:对于MD5不可逆的说法网上有很多讨论 如果是暴力逆转的话就不好说了

盐值是什么?

第一次听到盐值、很懵 盐?

翻译 salt:盐

其实SALT值属于随机值 不规律的值

其实盐值就是给算法加点盐(salt),salt相当于加密的密钥,增加攻击网站破解加密后值的难度

实战

1.安装MD5

npm install js-md5

2.引入MD5

全局引入

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
// 其他页面使用
this.$md5("加密内容")

局部映入

import md5 from 'js-md5';
md5("加密内容")

3.在login页面

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import md5 from 'js-md5';
let form = reactive({
  user: "",
  password: "",
})
const solt = 'yanzhi' // 盐值
const newUser=   // newUser 是前端写死加密过后的账号进行来比对的
  {    
    user: '1232f297a57a5a74', // admin
    passwor: '1232f297a57a5a74' // 123456
  },
// 登录按钮
const = subForm(()=>{
  这里就可以判断 md5(md5(from.user)+solt) 和 newUser.user的值是否相等
})
  • 代码可能描述清楚
    这里我们用公式描述

md5(md5(“未加密的账户”)+盐值)

从上面描述看其实就是 先进行加密账号然后加上盐值 再次进行加密

以上就是md5+盐值感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
存储 监控 前端开发
如何实现前端框架数据驱动方式的数据加密存储?
实现前端框架数据驱动方式的数据加密存储需要综合考虑多个因素,包括加密算法的选择、密钥管理、传输安全、服务器端处理等。通过合理的设计和实施,能够有效提高数据的安全性,保护用户的隐私和敏感信息。但需要注意的是,前端加密存储不能完全替代后端的安全措施,后端的安全防护仍然是不可或缺的。
470 53
|
存储 缓存 Java
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
1941 3
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
|
存储 前端开发 安全
如何确保前端框架数据驱动方式的数据加密存储的兼容性?
确保前端框架数据驱动方式的数据加密存储的兼容性需要综合考虑多个因素,通过充分的评估、测试、关注和更新,以及与其他技术的协调配合,来提高兼容性的可靠性,为用户提供稳定和安全的使用体验。
284 52
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
421 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1631 2
|
NoSQL Java Redis
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
这篇文章介绍了如何使用Spring Boot整合Apache Shiro框架进行后端开发,包括认证和授权流程,并使用Redis存储Token以及MD5加密用户密码。
462 0
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
2979 0
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
813 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1369 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
641 0