当前位置: 首页 > 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 学…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...