vue 项目中添加DES加密

vue 项目中添加DES加密

由于现在项目使用http协议,且登录界面是明文传输,项目真正上线后基本的密码传输都很不安全。

决定用前端框架加密后再进行传输,以提高密码传输过程中的安全性。
crypto-js 是一个流行的 JavaScript 加密库,它提供了多种加密算法和功能。以下是一些 crypto-js 提供的常见加密方法:

常见的加密方法(简单看一下有点印象,下边着重介绍des加密)

1.AES (Advanced Encryption Standard): 对称加密算法,支持多种模式(如 CBC, CTR, GCM 等)和填充方案。

CryptoJS.AES.encrypt(message, password, [options])
CryptoJS.AES.decrypt(ciphertext, password, [options])

2.DES (Data Encryption Standard): 对称加密算法,较老的标准。

CryptoJS.DES.encrypt(message, password, [options])
CryptoJS.DES.decrypt(ciphertext, password, [options])

3.Triple DES (3DES or DES-EDE3): 是 DES 的一个增强版本,使用三个不同的密钥。

CryptoJS.TripleDES.encrypt(message, password, [options])
CryptoJS.TripleDES.decrypt(ciphertext, password, [options])

4.Rabbit: 一个流密码,适用于加密大量数据。

CryptoJS.Rabbit.encrypt(message, password, [options])
CryptoJS.Rabbit.decrypt(ciphertext, password, [options])

5.RC4: 一个流密码,速度很快,但存在一些已知的弱点。

CryptoJS.RC4.encrypt(message, password, [options])
CryptoJS.RC4.decrypt(ciphertext, password, [options])

6.SHA1, SHA256, SHA512: 散列函数,用于生成数据的哈希值。

CryptoJS.SHA1(message)
CryptoJS.SHA256(message)
CryptoJS.SHA512(message)

7.HMAC (Hash-based Message Authentication Code): 基于散列函数的消息认证码,用于验证消息的完整性和来源。

CryptoJS.HmacSHA1(message, key)
CryptoJS.HmacSHA256(message, key)
CryptoJS.HmacSHA512(message, key)

8.PBKDF2 (Password-Based Key Derivation Function 2): 从密码中派生密钥的函数。

CryptoJS.PBKDF2(password, salt, iterations, keySize, hasher)

9.PRNG (Pseudo-Random Number Generator): 生成伪随机数。

CryptoJS.lib.WordArray.random(nBytes)

10.Base64: 编码和解码方法,用于将二进制数据转换为可打印的 ASCII 字符串。

CryptoJS.enc.Base64.stringify(wordArray)
CryptoJS.enc.Base64.parse(base64String)
这只是 crypto-js 提供的功能的一部分。为了获得完整的列表和详细的使用方法,建议查阅 crypto-js 的官方文档或源代码。

这里详细介绍一种加密方式des加密,其他加密类似操作

1.安装插件
安装
npm install crypto-js//引入
import CryptoJS from 'crypto-js';

或者下载依赖中crypto-js.js复制到本地,在引入到使用的文件中

var CryptoJS = require('./crypto-js.js')
2.封装加解密方法
var CryptoJS = require('./crypto-js.js')const key = ''    //秘钥
const keyHex = CryptoJS.enc.Utf8.parse(key)// 加密
const encryptDES = (message) => {if (message) {var encrypt = CryptoJS.DES.encrypt(message, keyHex, {// 配置选项mode: CryptoJS.mode.ECB, // 加密模式,ECB 是最简单的模式,但通常不推荐用于安全应用padding: CryptoJS.pad.Pkcs7 // 填充方案,用于确保数据长度适合加密})// return encrypt.toString();              //输出的是base64格式密文return encrypt.ciphertext.toString() //  加密出来为 hex格式密文// 注意点:	前后端加密的mode,padding和输出值需要保持一致,上边我写了两种格式的输出对应好应该就没啥问题了.} else {return ''}
}// 解密
const decryptDES = (ciphertext) => {if (ciphertext) {const decrypted = CryptoJS.DES.decrypt({ciphertext: CryptoJS.enc.Hex.parse(ciphertext)}, keyHex, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})return decrypted.toString(CryptoJS.enc.Utf8)} else {return ''}
}export {encryptDES,decryptDES
}

在上面的配置中:

message 是要加密的明文消息。
keyHex 是用于加密和解密的密钥。

对于 DES,它应该是 8 字节长(64 位)。在真实场景中,密钥通常通过更安全的机制生成和存储。

mode 是加密模式,

这里使用的是 CryptoJS.mode.ECB(电子密码本模式)。尽管 ECB 模式简单,但它通常被认为是不安全的,因为它不提供任何形式的块链接。更安全的模式包括 CBC(密码块链接模式)和 CFB(密码反馈模式)等。

padding 是填充方案,

用于确保数据长度适合加密。CryptoJS.pad.Pkcs7 是一种常用的填充方法。

请注意,DES 加密由于其较短的密钥长度(56 位)和已知的弱点,现在被认为是不安全的,并且在许多现代应用中都已被更安全的加密算法(如 AES)所取代。如果你正在开发一个新的应用或系统,建议使用更现代、更安全的加密算法

3.使用

使用很简单引入后直接调用就可以

import { encryptDES,decryptDES } from '@/utils/jiami/cryptoDes'
const ciphertext= encryptDES(message)   //加密
const message= decryptDES(ciphertext)   //解密

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817150.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vxe-vxe-toolbar中vxe-button选中切换status

1.VXE-Toolbar 在VXE-Toolbar中,可以使用vxe-button组件实现按钮的选中切换效果,并且可以根据不同的选中状态显示不同的样式。你可以通过设置status属性来控制按钮的选中状态,并通过监听按钮的点击事件来切换选中状态。需要在vxe-toolbar中添…

服务器配置ssh免密登录

需求:备份test10.22.33.96上的文件到 test10.22.33.97的定时脚本,需要使用scp命令传输文件,两台节点没有ssh互信,需要配置服务器之间的SSH互信为了让两台或多台服务器之间能够无密码自动登录 步骤1:生成密钥对 在每一台需要建立互信的服务器(test10.22.33.96)上执…

每日两题1

文章目录 使用最小花费爬楼梯91解码方法 使用最小花费爬楼梯 class Solution { public:int minCostClimbingStairs(vector<int>& cost) {if(cost.size() 2)return min(cost[0],cost[1]);vector<int> dp;dp.reserve(cost.size()1);dp[0] 0;dp[1] 0;for(int i…

【域适应】基于深度域适应MMD损失的典型四分类任务实现

关于 MMD &#xff08;maximum mean discrepancy&#xff09;是用来衡量两组数据分布之间相似度的度量。一般地&#xff0c;如果两组数据分布相似&#xff0c;那么MMD 损失就相对较小&#xff0c;说明两组数据/特征处于相似的特征空间中。基于这个想法&#xff0c;对于源域和目…

顶切,半顶切是什么意思?

齿轮加工及刀具中有一些特定名词或者叫法&#xff0c;不熟悉的小伙伴可能最开始会有一些困惑&#xff0c;这不&#xff0c;最近有小伙伴问了一个问题&#xff1a;顶切是说齿顶的倒角吗&#xff1f; 今天就给大家说说顶切和半顶切。 一、顶切 Topping 从字面上可以看到可以想到…

Swagger API 文档 | SpringCloudGateway 集成 SpringDoc

文章目录 工作原理方案 1:配置 swagger-ui.urls方案 2:通过路由定义动态配置具体案例第 1 步:导入代码第 2 步:配置 Swagger Url 列表第 3 步:启动程序第 4 步:查看注册中心第 5 步:访问网关 Swagger UI相关博文😎 本节目标: Spring Cloud Gateway 集成 SpringDoc,实…

MySQL的权限管理

MySQL的权限管理 在理解MySQL的权限管理之前&#xff0c;我们需要先了解其架构设计以及权限管理在该架构中的定位。 MySQL的架构设计 MySQL数据库系统采用了分层的架构设计&#xff0c;主要可以分为以下几个层级&#xff1a; 连接层&#xff1a;最外层&#xff0c;处理连接…

x264 8x8 水平预测汇编分析

C 语言代码 void s264_predict_8x8_h_c( pixel *src, pixel edge[36] ) { PREDICT_8x8_LOAD_LEFT #define ROW(y) MPIXEL_X4( srcy*FDEC_STRIDE0 ) \ MPIXEL_X4( srcy*FDEC_STRIDE4 ) PIXEL_SPLAT_X4( l##y ); ROW(0); ROW(1); ROW(2); ROW(3); ROW(4); ROW(5); ROW(6); ROW(7…

VUE3:自定义loading指令

一、效果描述 在一个div中使用该指令并绑定一个变量&#xff0c;通过修改变量实现Loading的显示与隐藏。 二、代码与使用方式 1.使用指令的vue组件 <template><div v-loading"showLoading"></div> </template> <script setup lang&q…

爬虫 selenium

爬虫 selenium 【一】介绍 【1】说明 Selenium是一款广泛应用于Web应用程序测试的自动化测试框架 它可以模拟用户再浏览器上的行为对Web应用进行自动化测试 主要作用&#xff1a; 浏览器控制&#xff1a;启动、切换、关闭不同浏览器元素定位于操作&#xff1a;通过CSS选择器…

vscode中运行js

vscode中运行js 目前vscode插件运行js都是基于node环境&#xff0c;vscode控制台打印有些数据不方便等缺点。 每次调试在浏览器中运行js&#xff0c;需要创建html模板、插入js。期望能够直接运行js可以打开浏览器运行js&#xff0c;在vscode插件市场找到一款插件可以做到。 插…

yolo系列(之一)

深度学习经典检测算法 two-stage (两阶段) : Faster-rcnn Mask-Rcnn系列 &#xff08;输入图像---》CNN特征---》预选框---》输出结果&#xff09; one-stage (单阶段): YOLO系列 &#xff08;输入图像---》CNN特征---》输出结果&#xff09; one-stage的特点&#xff1a;&…

深度学习学习日记4.15 (面向GPT学习)

精确学习时间&#xff08;09点35分开始&#xff09; 深度学习 torch.nntorch.utils.datanumpytorchvision中的模块有哪些os 模块PIL&#xff08;Python Imaging Library&#xff09;tqdmmatplotlibnn.ReLU inplace参数设为Truenn.relu 训练的迭代过程梯度清零loss指标计算为什…

2024 蓝桥打卡Day40

2021、2022年蓝桥杯真题练习 2021年蓝桥杯真题练习A ASCB 卡片C 查找D 货物摆放F 时间显示H 杨辉三角形 2022年蓝桥杯真题练习A 星期计算B 山C 字符统计D 最少刷题数E 求阶乘 2021年蓝桥杯真题练习 A ASC package THL_0412;public class A_2021 {public static void main(Str…

SQLite超详细的编译时选项(十六)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite数据库文件格式&#xff08;十五&#xff09; 下一篇&#xff1a;SQLite 在Android安装与定制方案&#xff08;十七&#xff09; 1. 概述 对于大多数目的&#xff0c;SQLite可以使用默认的 编译选项。但是…

WinForms 零基础进阶教程:文件操作与 CSV 处理

文章目录 文件操作数据存储与文件操作文件存取的好处文件存取的方式文本文件的写入和读取文本文件的删除、复制和移动 目录的操作文件属性操作文件路径 对话框OpenFileDialog对话框SaveFileDialog对话框对话框中CheckPathExists属性的应用 CSV 文件读写与 DataGridView 进阶Dat…

Python基于Django的微博热搜、微博舆论可视化系统

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

Redis限流插件

Redis限流插件: 1:搭建层级结构 同时对 redis.log 授权 chmod 777 redis.log2:确认 redis 版本 3:下载redis配置文件 redis.conf https://redis.io/docs/management/config/ 4:上传/redis/conf作为原始 redis.conf 5:在/redis_6390/conf下编辑redis.conf docker run -it \ --…

美国有哪些银行可以开?美国华美银行开户

很多客户在注册香港公司后&#xff0c;都会选择美国的银行开户&#xff0c;因为目前较好开&#xff0c;简单&#xff0c;快速&#xff0c;便宜&#xff0c;性价比较高的银行 。 华美银行现为全美以华裔为主要市场规模较大的商业银行&#xff0c;总部位于加州&#xff0c;专注于…

营销自动化的未来趋势

​营销自动化在2024年的趋势将继续沿着数字化、个性化和智能化的方向发展。 根据小编全网搜索相关资料信息整理得出&#xff0c;营销自动化有以下可能趋势&#xff1a; 1、深度智能化&#xff1a;随着人工智能技术的进一步发展&#xff0c;营销自动化将更加智能化。通过机器学…