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

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...