vue 项目中添加DES加密-程序员宅基地

技术标签: 前端  javascript  

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)   //解密
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46995731/article/details/137599810

智能推荐

手把手教你安装Eclipse最新版本的详细教程 (非常详细,非常实用)_eclipse安装教程-程序员宅基地

文章浏览阅读4.4k次,点赞2次,收藏16次。写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方便小伙伴们和童鞋们的后续学习和不打击他们的积极性,因为80%的人都是死在工具的安装这第一道门槛上,这门槛说高也不高说低也不是太低。所以就抽时间水了这一篇文章。_eclipse安装教程

分享11个web前端开发实战项目案例+源码_前端项目实战案例-程序员宅基地

文章浏览阅读4.1w次,点赞12次,收藏193次。小编为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧!1)小米官网项目描述:首先选择小米官网为第一个实战案例,是因为刚开始入门,有个参考点,另外站点比较偏向目前的卡片式设计,实现常见效果。目的为学者练习编写小米官网,熟悉div+css布局。学习资料的话可以加下web前端开发学习裙:600加上610再加上151自己去群里下载下。项目技术:HTML+CSS+Div布局2)迅雷官网项目描述:此站点特效较多,所以通过练习编写次站点,学生可以更多练习CSS3的新特性过渡与动画的实_前端项目实战案例

计算质数-埃里克森筛法(间隔黄金武器)-程序员宅基地

文章浏览阅读73次。素数,不同的质数,各种各样的问题总是遇到的素数。以下我们来说一下求素数的一种比較有效的算法。就是筛法。由于这个要求得1-n区间的素数仅仅须要O(nloglogn)的时间复杂度。以下来说一下它的思路。思路:如今又1-n的数字。素数嘛就是除了1和本身之外没有其它的约数。所以有约数的都不是素数。我们从2開始往后遍历,是2的倍数的都不是素数。所以我们把他们划掉然后如...

探索Keras DCGAN:深度学习中的创新图像生成-程序员宅基地

文章浏览阅读532次,点赞9次,收藏14次。探索Keras DCGAN:深度学习中的创新图像生成项目地址:https://gitcode.com/jacobgil/keras-dcgan在数据驱动的时代,图像生成模型已经成为人工智能的一个重要领域。其中,Keras DCGAN 是一个基于 Keras 的实现,用于构建和训练 Deep Convolutional Generative Adversarial Networks(深度卷积生...

org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):_spring-could org.apache.ibatis.binding.bindingexce-程序员宅基地

文章浏览阅读116次。今天在搭建springcloud项目时,发现如上错误,顺便整理一下这个异常:1. mapper.xml的命名空间(namespace)是否跟mapper的接口路径一致<mapper namespace="com.baicun.springcloudprovider.mapper.SysUserMapper">2.mapper.xml接口名是否和mapper.java接..._spring-could org.apache.ibatis.binding.bindingexception: invalid bound state

四种高效数据库设计思想——提高查询效率_数据库为什么能提高效率-程序员宅基地

文章浏览阅读1.1k次。四种高效数据库设计思想——提高查询效率:设计数据库表结构时,我们首先要按照数据库的三大范式进行建立数据。1. 1NF每列不可拆分2. 2NF确保每个表只做一件事情3. 3NF满足2NF,消除表中的依赖传递。三大范式的出现是在上世纪70年代,由于内存资源比较昂贵,所以严格按照三大范式进行数据库设计。而如今内存变得越来越廉价,在考虑效率和内存的基础上我们可以做出最优选择以达到最高效率。_数据库为什么能提高效率

随便推点

什么是配置_基于配置是什么意思-程序员宅基地

文章浏览阅读1.6k次。应用程序在启动和运行的时候往往需要读取一些配置信息,配置基本上伴随着应用程序的整个生命周期,比如:数 据库连接参数、启动参数等。配置主要有以下几个特点:配置是独立于程序的只读变量配置对于程序是只读的,程序通过读取配置来改变自己的行为,但是程序不应该去改变配置配置伴随应用的整个生命周期配置贯穿于应用的整个生命周期,应用在启动时通过读取配置来初始化,在运行时根据配置调整行为。比如:启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。配置可以有多种加载方式常见的有程序内部_基于配置是什么意思

二、使用GObject——一个简单类的实现-程序员宅基地

文章浏览阅读170次。Glib库实现了一个非常重要的基础类--GObject,这个类中封装了许多我们在定义和实现类时经常用到的机制: 引用计数式的内存管理 对象的构造与析构 通用的属性(Property)机制 Signal的简单使用方式 很多使用GObject..._

golang 定时任务处理-程序员宅基地

文章浏览阅读6.3k次,点赞2次,收藏9次。在 golang 中若写定时脚本,有两种实现。一、基于原生语法组装func DocSyncTaskCronJob() { ticker := time.NewTicker(time.Minute * 5) // 每分钟执行一次 for range ticker.C { ProcTask() }}func ProcTask() { log.Println("hello world")}二、基于 github 中封装的 cron 库实现package taskimport (_golang 定时任务

VC获取精确时间的方法_vc 通过线程和 sleep 获取精准时间-程序员宅基地

文章浏览阅读2.1k次。 来源:http://blog.csdn.net/clever101/archive/2008/10/18/3096049.aspx 声明:本文章是我整合网上的资料而成的,其中的大部分文字不是我所为的,我所起的作用只是归纳整理并添加我的一些看法。非常感谢引用到的文字的作者的辛勤劳动,所参考的文献在文章最后我已一一列出。 对关注性能的程序开发人员而言,一个好的计时部件既是益友,也_vc 通过线程和 sleep 获取精准时间

wml入门-程序员宅基地

文章浏览阅读58次。公司突然说要进行wap开发了,以前从没了解过,但我却异常的兴奋,因为可以学习新东西了,呵呵,我们大家一起努力吧。首先说说环境的搭建。可以把.wml的文件看做是另一种的html进行信息的展示,但并不是所有的浏览器都支持,好用的有Opera,还有WinWap。编写wml文件语法比较严格,不好的是我还没有找到好的提示工具,就先用纯文本吧。我找到了一个很好的学习网站:http://w3sc..._winwap学习

计算机考研怎么给老师发邮件,考研复试前,手把手教你怎么给导师发邮件!4点要注意...-程序员宅基地

文章浏览阅读504次。考研成绩出来后,第一件事是干什么?当然不只是高兴,而是马上给心仪的导师发邮件,先露个“名字熟”。不要以为初试考了高分或者过线了,一切都稳妥了,一时得意忘形,居然没联系导师,等想起时,导师已经属于他人了。对于一些大佬,热门导师一定要趁早发邮件咨询,一是表示尊重;二是这类老师可能已经没有统招名额,所以越早知道,越有利于下一步计划。但是,在给导师发邮件中,要注意以下4点,不求一步成功,但求先留下个好印象..._跨考计算机怎么给导师发邮件