前端加密方式

目前搜索前端加密是可以看到有非常非常多的方法的,这里我们需要对其分类总结,从密码学的基础来看,其实总归分为两类,一类是不可逆加密,一类是可逆加密(可逆加密又分为两类,a.对称加密 b.非对称加密)。基本上前端加密的方式都可以归结到上面的分类中

1.不可逆加密

也可以说成是单向加密,单向加密通过对数据进行摘要计算生成密文,密文不可逆推还原。只能加密,不能解密,常用于提取数据的指纹信息以此来验证数据的完整性。但是会引发雪崩效应(雪崩效应就是一种不稳定的平衡状态也是加密算法的一种特征,它指明文或密钥的少量变化会引起密文的很大变化,就像雪崩前,山上看上去很平静,但是只要有一点问题,就会造成一片大崩溃。 可以用在很多场合对于Hash码,雪崩效应是指少量消息位的变化会引起信息摘要的许多位变化。)

注意这里的密码是不可解密的,目前某些密码解密主要用到的是数据库撞库导致可以解密。 算法代表:MD5,SHA。 使用场景:登录密码加密

2.可逆加密

a.对称加密

对称加密的加密和解密是使用同一个密钥;加密和解密的速度比较快,效率比较高;但是密钥传输过程不安全,容易破解,而且密钥管理也比较麻烦。 算法代表:DES,3DES,AES,IDEA,RC4,RC5

对称加密可以分为两类:序列密码和分组密码

使用场景:简单的需要加密的数据,主要是不想让别人看到是什么,破解了也无所谓。这里可以看下这个库CryptoJS(des加密解密)

b.非对称加密(本文重点)

a.含义:

相对对称加密而言,无需拥有同一组密钥,非对称加密是一种"信息公开的密钥交换协议"。非对称加密需要公开密钥和私有密钥两组密钥,公开密钥和私有密钥是配对起来的,也就是说使用公开密钥进行数据加密,只有对应的私有密钥才能解密。这两个密钥是数学相关,用某用户密钥加密后的密文,只能使用该用户的加密密钥才能解密。如果知道了其中一个,并不能计算出另外一个。因此如果公开了一对密钥中的一个,并不会危害到另外一个密钥性质。这里把公开的密钥为公钥,不公开的密钥为私钥。

算法代表:RSA,DSA。

b.过程理解:

1.首先你需要在线生成两对密钥对,然后利用这两对密钥对进行加密解密(生成网址:web.chacuo.net/netrsakeypa... )。

大概的意思就是: 前端拿着生成好的公钥A对账号密码进行加密,然后后端使用私钥A在后端进行解密再存入数据库(公钥a和私钥a是一对,同理公钥b和私钥b是一对)。对需要加密的数据(如密码),后端拿着公钥B对其进行加密,前端使用私钥B进行解密

c.项目中使用:

javascript 复制代码
npm i jsencrypt
javascript 复制代码
import { JSEncrypt } from 'jsencrypt'
// RSA 解密
function decryptRSA(str: string) {
    const encryptor = new JSEncrypt() // 新建JSEncrypt对象
    const privateKey = "XXXX" // 私钥串
    encryptor.setPrivateKey(privateKey)//设置私钥
    const decrytStr = encryptor.decrypt(str)
    return decrytStr
}

// RSA 加密
function encryptRSA(str: string) {
    const encryptor = new JSEncrypt() // 新建JSEncrypt对象
    const publicKey = '';  //公钥串
    encryptor.setPublicKey(publicKey) // 设置公钥
    const rsaPassWord = encryptor.encrypt(str)
    return rsaPassWord
}

总结:

对于前端来说,md5加密和jsencrypt非对称加密使用的是相对来说比较多的, 对称加密使用的相对来说较少(需要用到的话,可以搜索下CryptoJS),但是我们最好是都需要掌握一下

参考地址

密码学基础(csdn):blog.csdn.net/jarthong/ar... 前端加密分类(csdn):blog.csdn.net/joe0235/art... 非对称加密(掘金):juejin.cn/post/701130... des加密解密:blog.csdn.net/m0_63304840...

相关推荐
Larcher2 小时前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践
javascript·后端
Larcher2 小时前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top P
javascript·后端
用户938515635075 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep5 小时前
稚晖君公司人事大变动,来了!
前端·后端·程序员
鱼樱前端5 小时前
用 AI 做内容变收入
前端·人工智能·ai编程
eric-sjq6 小时前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)
javascript·机器学习·自然语言处理·html
浮生望6 小时前
React + TypeScript 组件设计进阶:从类型约束到无状态组件的三次进化
前端
To_OC6 小时前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定
javascript·算法·leetcode
90后的晨仔6 小时前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行
前端·vue.js
90后的晨仔6 小时前
别再搞混了!uni-app 中 node_modules 和 uni_modules 到底是什么关系?
前端