在前端对登录密码进行加密,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+盐值感谢大家的阅读

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

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

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

相关文章
|
3月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
216 5
|
存储 监控 前端开发
如何实现前端框架数据驱动方式的数据加密存储?
实现前端框架数据驱动方式的数据加密存储需要综合考虑多个因素,包括加密算法的选择、密钥管理、传输安全、服务器端处理等。通过合理的设计和实施,能够有效提高数据的安全性,保护用户的隐私和敏感信息。但需要注意的是,前端加密存储不能完全替代后端的安全措施,后端的安全防护仍然是不可或缺的。
371 53
|
6月前
|
存储 安全 算法
用 MD5 加密 WordPress 验证码的完整教程
本文详细介绍了如何使用MD5加密技术增强WordPress验证码的安全性。通过将验证码答案以MD5形式加密并存储在Session中,避免了明文传输可能带来的安全风险。文章从形势分析、MD5算法介绍到实战操作步骤,逐步引导读者实现加密验证流程。同时提供了调试方法,确保修改生效。此教程旨在为网站添加一层安全保障,提升对抗网络攻击的能力。
370 1
|
7月前
|
存储 算法 安全
MD5加密
MD5(Message-Digest Algorithm 5)是一种单向加密算法,将任意长度的数据转换为128位固定长度的散列值,主要用于数据完整性校验和密码存储。其特点包括不可逆运算、高度离散性和相同输入生成一致结果。然而,MD5存在碰撞风险,直接加密密码不安全,需配合“加盐”处理增强安全性。文中提供了未加盐的MD5工具类`MD5Utils`,核心方法`msgToMD5`实现基本加密功能。尽管MD5理论上不可逆,但通过彩虹表等手段可能存在伪破解风险,建议结合多种加密算法提升安全性。
544 2
|
10月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
551 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
10月前
|
存储 缓存 Java
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
1261 3
java语言后台管理ruoyi后台管理框架-登录提示“无效的会话,或者会话已过期,请重新登录。”-扩展知识数据库中密码加密的方法-问题如何解决-以及如何重置若依后台管理框架admin密码-优雅草卓伊凡
|
存储 前端开发 安全
如何确保前端框架数据驱动方式的数据加密存储的兼容性?
确保前端框架数据驱动方式的数据加密存储的兼容性需要综合考虑多个因素,通过充分的评估、测试、关注和更新,以及与其他技术的协调配合,来提高兼容性的可靠性,为用户提供稳定和安全的使用体验。
234 52
|
11月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
318 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
1342 2
|
NoSQL Java Redis
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。
这篇文章介绍了如何使用Spring Boot整合Apache Shiro框架进行后端开发,包括认证和授权流程,并使用Redis存储Token以及MD5加密用户密码。
335 0
shiro学习四:使用springboot整合shiro,正常的企业级后端开发shiro认证鉴权流程。使用redis做token的过滤。md5做密码的加密。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    578
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    238
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    226
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    164
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    275
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    408
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    176
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    112
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    191
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    261