前端加密方式

目前搜索前端加密是可以看到有非常非常多的方法的,这里我们需要对其分类总结,从密码学的基础来看,其实总归分为两类,一类是不可逆加密,一类是可逆加密(可逆加密又分为两类,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...

相关推荐
mldong5 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排5 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60616 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角7 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!7 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰7 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi9 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen9 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马10 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu10 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss