当前位置: 首页 > news >正文

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)   //解密

相关文章:

vue 项目中添加DES加密

vue 项目中添加DES加密 由于现在项目使用http协议,且登录界面是明文传输,项目真正上线后基本的密码传输都很不安全。 决定用前端框架加密后再进行传输,以提高密码传输过程中的安全性。 crypto-js 是一个流行的 JavaScript 加密库&#xff0…...

【记录问题】如何测试虚拟机已经可以连接网络

如何测试虚拟机已经可以连接网络 要测试虚拟机是否已经连接网络,可以采取以下步骤: 检查虚拟网络编辑器 使用管理员权限打开虚拟网络编辑器,检查NAT方式下的虚拟子网网段。 确保虚拟机的网络设置与虚拟子网网段相匹配。检查虚拟机网络设置 …...

MySQL数据库的详解(1)

DDL(数据库操作) 查询 查询所有数据库:show databases;当前数据库:select database(); 创建 创建数据库:create database [ if not exists] 数据库名 ; 使用 使用数据库:use 数据库名 ; 删除 删除数…...

Python 网络爬虫技巧分享:优化 Selenium 滚动加载网易新闻策略

简介 网络爬虫在数据采集和信息获取方面发挥着重要作用,而滚动加载则是许多网站常用的页面加载方式之一。针对网易新闻这样采用滚动加载的网站,如何优化爬虫策略以提高效率和准确性是一个关键问题。本文将分享如何利用 Python 中的 Selenium 库优化滚动…...

Apache SeaTunnel 社区 3 月月报

各位热爱 SeaTunnel 的小伙伴们,SeaTunnel 社区 3 月月报来啦!这里将记录 SeaTunnel 社区每个月的重要更新,并评选出月度之星,欢迎关注。 SeaTunnel 月度 Merge Stars 感谢以下小伙伴 3 月为 Apache SeaTunnel 做的精彩贡献&…...

ElasticSearch 的 ConstantScoreQuery 的理解

ConstantScoreQuery的定义: A query that wraps another query and simply returns a constant score equal to 1 for every document that matches the query. It therefore simply strips of all scores and always returns 1. 结合DisMaxQueryBuilder可以查找所…...

【RV1106的ISP使用记录之一】基础环境搭建

公司缺少ISP工程师,做为图像算法工程师的我这就不就给顶上来了么,也没给发两份工资,唉~ 先写个标题,占一个新坑,记录RK平台的传统ISP工作。 一、基础环境的硬件包括三部分: 1、相机环境,用于采…...

mars3d.MaterialType.Image2修改配置面状:图片2的speed数值实现动画效果说明

摘要: mars3d.MaterialType.Image2修改配置面状:图片2的speed数值实现动画效果说明 前提: 1.在示例中,尝试给mars3d.MaterialType.Image2材质的图片加上speed参数,实现动画效果,但是没有看到流动效果说明…...

Elasticsearch部署安装

环境准备 Anolis OS 8 Firewall关闭状态,端口自行处理 Elasticsearch:7.16.1(该版本需要jdk11) JDK:11.0.19 JDK # 解压 tar -zxvf jdk-11.0.19_linux-x64_bin.tar.gz# 编辑/etc/profile vim /etc/profile# 加入如下…...

Android零基础入门(一)配置环境和安装Android Studio

闲来无事学一下Android,本人目前java为主,jdk的环境就不赘述了 配置环境 Java JDK5 或 以后版本 Android SDK Java运行时环境(JRE) Android Studio 你可以从 Oracle 的 Java 网站:JDKJava SE下载下载最新版本的 Jav…...

Golang编译优化——消除Copy指令

一、优化概述 以下是Go编译器对某个代码段编译生成的SSA IR摘选&#xff0c;对于Golang SSA IR的介绍我写了文章&#xff0c;但是在犹豫要不要发。 b1:-... Plain → b2 (5)b2: ← b1 b4-v9 (5) Phi <int> v8 v16 (i[int])v22 (8) Phi <int> v7 v14 (r[int])v1…...

Java IO流对象流实操

ATM的io对象流&#xff1a; package com.jsu.atm; import com.jsu.atm.Serializable; public class Account implements Serializable{//私有数据成员private String UserName; // 用户名称private String PassWord; // 用户密码private double RemainMoney; // 用户余额…...

Mapbox教程:一个简单Demo

近期工作中准备把Mapbox用起来&#xff0c;准备发几个教程&#xff0c;把Mapbox再熟悉熟悉。工作中也用过不少的Web GIS组件&#xff0c;在这里说一下我对这些WebGIS组件的印象。 Leaflet 代码简洁&#xff0c;插件丰富&#xff0c;相比于其大小&#xff0c;功能也挺强大&#…...

看AI赋能数智化 | Gooxi AI服务器闪耀CITE 2024

4月9日“中国电子信息博览会暨2024 AI算力产业大会”在深圳如期开展&#xff0c;Gooxi携最新产品、行业应用全栈解决方案出席盛会&#xff0c;全面展示Gooxi回应数智新时代下机遇与挑战的丰富AI创新实践成果。 All in AI&#xff0c;奔赴新质生产力 作为中国领先的服务器解决…...

大话设计模式——21.中介者模式(Mediator Pattern)

简介 用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互 UML图 应用场景 大量的连接使得一个对象不可能在没有其他对象的支持下工作&#xff0c;系统表现为一个不可分割的…...

Linux 计算机网络

目录 一、网络协议 1、 "协议" 是一种约定 2、协议分层 二、网络模型 1、OSI七层模型 2、TCP/IP五层(或四层)模型 三、网络传输基本流程 四、数据包封装和分用 五、网络中的地址管理 六、网络编程套接字 1、理解源IP地址和目的IP地址 2、端口号 理解 &q…...

bash脚本中‘-b -u -p’‘$# -eq’‘#!/bin/bash’‘sed -i “s/\r//“ $1’的用法说明

#!/bin/bash#!/bin/bash: 这是 Bash 脚本的开头&#xff0c;指定了要使用的解释器&#xff0c;即 Bash。 if [ $# -eq 0 ]; thenif [ $# -eq 0 ]; then: 检查脚本是否被调用时提供了参数。$# 表示参数的数量&#xff0c;-eq 0 表示等于 0&#xff0c;即无参数。 echo "p…...

【人工智能】Gitee AI 天数智芯有奖体验开源AI模型,一定能有所收货,快来体验吧

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章。 这是《人工智能》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 目录 前言两大赛道天数智芯1.模型地址2.天数智芯专区3.选择模型4.模型详情页5.部署模型6.成功部署7.执行例子8.移除模型 千模盲…...

Ceph学习 -8.认证管理-用户基础

文章目录 1.用户基础1.1 基础知识1.2 简单实践1.3 小结 1.用户基础 学习目标&#xff1a;这一节&#xff0c;我们从基础知识、简单实践、小结三个方面来学习。 1.1 基础知识 简介 Ceph集群管理员能够直接在Ceph集群中创建、更新和删除用户 注意&#xff1a;创建用户时&#x…...

大创项目推荐 深度学习+opencv+python实现昆虫识别 -图像识别 昆虫识别

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数&#xff1a;2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 4 MobileNetV2网络5 损失函数softmax 交叉熵5.1 softmax函数5.2 交叉熵损失函数 6 优化器SGD7 学…...

卡证检测矫正模型效果展示:高清四角点定位+正视角矫正图实拍

卡证检测矫正模型效果展示&#xff1a;高清四角点定位正视角矫正图实拍 你有没有遇到过这样的烦恼&#xff1f;需要上传身份证、驾照或者护照照片时&#xff0c;手机随手一拍&#xff0c;结果照片歪歪扭扭&#xff0c;背景杂乱&#xff0c;关键信息还被手指挡住了。这时候要么…...

OpenClaw × 88API:不用注册 Anthropic,5 分钟让 AI Agent 接入 Claude 4.6(2026 完整教程)

折腾了两天&#xff0c;最后 5 分钟搞定 上周我想用 OpenClaw 搭一个能自动重构代码的 Agent。选定 Claude 4.6 当大脑——毕竟它在 Tool Use 精准度和长上下文推理上确实是第一梯队。 结果卡在了第一步&#xff1a;Anthropic 官方账号注册要海外手机号&#xff0c;好不容易注…...

Qwen3字幕生成工具5分钟快速上手:零基础制作精准SRT字幕

Qwen3字幕生成工具5分钟快速上手&#xff1a;零基础制作精准SRT字幕 1. 工具简介与核心优势 1.1 什么是Qwen3字幕生成工具 Qwen3字幕生成工具是一款基于阿里云通义千问双模型的本地智能字幕生成解决方案。它由两个核心AI模型组成&#xff1a; Qwen3-ASR-1.7B&#xff1a;负…...

PyTorch张量操作实战:从基础运算到高效数据处理

1. PyTorch张量基础&#xff1a;从零开始理解多维数组 第一次接触PyTorch张量时&#xff0c;我完全被这个看似复杂的概念搞懵了。直到有一天&#xff0c;我把张量想象成俄罗斯套娃&#xff0c;突然就豁然开朗了。最外层的套娃是最高维度&#xff0c;每打开一层就降一个维度&…...

Comsol 薄板声辐射响应优化:激励位置与频率的协同效应

1. 薄板声辐射响应基础原理 当你用手指轻轻敲击一块金属薄板时&#xff0c;会听到清脆的声响。这个看似简单的现象背后&#xff0c;隐藏着复杂的声学原理。在Comsol仿真中&#xff0c;我们可以精确模拟这种声辐射响应&#xff0c;为声学设备设计提供科学依据。 薄板声辐射的本质…...

为什么92%的Polars新手在join时OOM?揭秘2.0新版streaming引擎的5个关键启用条件

第一章&#xff1a;Polars 2.0 大规模数据清洗技巧 面试题汇总Polars 2.0 引入了更严格的惰性执行模型、增强的字符串/时间解析能力&#xff0c;以及对空值传播行为的统一语义&#xff0c;使其在高频面试场景中成为考察候选人工程化数据处理能力的关键工具。以下为高频面试题及…...

Dobby跨平台编译技术指南:从环境配置到多架构部署实践

Dobby跨平台编译技术指南&#xff1a;从环境配置到多架构部署实践 【免费下载链接】Dobby a lightweight, multi-platform, multi-architecture hook framework. 项目地址: https://gitcode.com/gh_mirrors/do/Dobby 一、基础认知&#xff1a;Hook框架与跨平台编译基础 …...

Jenkins与GitHub集成指南:从凭据配置到自动化构建的全流程

Jenkins与GitHub深度集成实战&#xff1a;构建企业级自动化流水线 在DevOps实践中&#xff0c;持续集成与持续交付(CI/CD)已成为现代软件开发的核心环节。Jenkins作为最流行的开源自动化服务器&#xff0c;与GitHub的深度集成能够显著提升团队协作效率。本文将带您从零开始构建…...

sklearn分类报告报错?一招解决UndefinedMetricWarning的零除问题

机器学习模型评估中的UndefinedMetricWarning&#xff1a;从原理到实战解决方案 当你第一次看到控制台弹出"UndefinedMetricWarning: Precision and F-score are ill-defined"的红色警告时&#xff0c;是不是感觉一头雾水&#xff1f;这个看似简单的警告背后&#x…...

差点被这套AI工具搞离职...搞懂MCP和Skill后,我发现宇宙的尽头是“写小作文”

剥开神秘面纱前两天&#xff0c;隔壁组的新人小王差点被开除。这小子为了赶进度&#xff0c;搞了个瞎折腾的操作&#xff1a;把公司一个十几万行的老旧核心项目&#xff0c;一股脑全扔进 Cursor 里&#xff0c;连哄带骗地让 AI 帮他重构。结果呢&#xff1f;跑出来的代码简直是…...