【关于前端加密】CryptoJS与blake2b实践

2023-10-14 11:50
文章标签 实践 加密 前端 frontend cryptojs blake2b

本文主要是介绍【关于前端加密】CryptoJS与blake2b实践，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

环境：前端vue3，服务端go

需求1：const hashed = (mac+symbol+timestamp)的blake2b128 hash值

需求2：使用aescbc-128算法加密token、body

需求3：解密接口返回的response data

blake2b

  1. 使用 npm 或者 yarn 安装依赖

npm install blake2b

或者

bashCopy codeyarn add blake2b

  1. 在 Vue 3 项目中引入库：

import blake2b from 'blake2b';

  1. 在需要使用 Blake2b-128 哈希的地方，调用库进行计算：
js复制代码// 计算 Blake2b-128 哈希 
const hash = blake2b(16).update('Hello, World!').digest('hex'); 
console.log(hash)

💡
在 blake2b(16) 中的 16 表示生成的 Blake2b 哈希的输出长度（以字节为单位）。在这种情况下，16 表示输出的哈希值长度为 16 字节，即 128 位。

Blake2b 是一种多功能哈希函数，它可以生成不同长度的哈希值。通过指定不同的输出长度，你可以控制生成的哈希值的位数。例如，如果你想要一个 256 位的哈希值，你可以使用 blake2b(32)，其中 32 表示输出长度为 32 字节（256 位）。
在使用 Blake2b 哈希库时，根据你的具体需求，你可以选择适当的输出长度来满足你的要求。请注意，输出长度越长，哈希值的唯一性和强度可能会更高，但也会增加存储和传输的开销。

AES-CBC-128加密算法

使用CryptoJS 库来实现

  1. 使用 npm 或 yarn 安装 CryptoJS：

npm install crypto-js

或者

yarn add crypto-js

  1. 在需要使用 AES-CBC-128 加密的地方，引入库：

import CryptoJS from 'crypto-js';

  1. 使用 CryptoJS 进行 AES-CBC-128 加密：
js复制代码// 定义密钥和初始向量（示例） 
const key = CryptoJS.enc.Hex.parse('000102030405060708090a0b0c0d0e0f'); // 128-bit key 
const iv = CryptoJS.enc.Hex.parse('101112131415161718191a1b1c1d1e1f'); // 128-bit IV // 加密 
const plaintext = 'Hello, World!'; 
const encrypted = CryptoJS.AES.encrypt(plaintext, key, { iv: iv }).toString(); console.log(encrypted);

在上述示例中，我们使用 CryptoJS 库进行 AES-CBC-128 加密。我们提供了一个 128 位的密钥和一个 128 位的初始向量（IV），并使用 CryptoJS.AES.encrypt 方法进行加密操作。加密结果以字符串形式输出。

实操

以上是两个工具的基本用法，接下来进入实践部分

前提：const ac = 与服务端约定一个常量

目标：在请求头中添加session

aescbc-128加密（计算session）

const ac = "aaabbbccc"

token: "aaabbbccc"

  1. ac+timestamp(时间戳)，计算blake2b128得到hash值
  2. 使用aescbc-128算法加密token,加密key为hashed前16个字符转byte数组(Uint8Array),iv为后16个字符转byte数组
  3. 将加密后的结果做base64，即为session
js复制代码
// 转换为byte数组
const strToByteArray = (str: string) => {return new Uint8Array([...str].map((c) => c.charCodeAt(0)))
}// 计算 Blake2b-128 哈希
export const calcBlake2b = (val: string) => {return blake2b(16).update(strToByteArray(val)).digest('hex')
}// 模拟go的HexDecode(js版本) 
// 每两位转为一个十进制数字   比如 ：  d4 --- >  212
const HexDecode = (hexString: string) => {const decimalArray = []for (let i = 0; i < hexString.length; i += 2) {const hexPair = hexString.substr(i, 2)const decimalNumber = parseInt(hexPair, 16)decimalArray.push(decimalNumber)}return new Uint8Array(decimalArray)
}// 计算session
export const geneOpenApiSession = (ac: string,token: string,timestamp: string
) => {const hashed = calcBlake2b(ac + timestamp)// hashed前16个字符转换为byte数组 128-bit keyconst keyBytes = strToByteArray(hashed.substring(0, 16))// hashed后16个字符转换为byte数组 128-bit IVconst ivBytes = strToByteArray(hashed.substring(hashed.length - 16))// aescbc-128算法const plaintext = CryptoJS.enc.Hex.parse(token) // 同：CryptoJS.lib.WordArray.create(HexDecode(token))const encrypted = CryptoJS.AES.encrypt(plaintext, CryptoJS.lib.WordArray.create(keyBytes), {iv: CryptoJS.lib.WordArray.create(ivBytes)}).toString()return encrypted
}

CryptoJS.enc.Hex.parse

💡
CryptoJS.enc.Hex.parse是 CryptoJS 库中的一个方法，用于将十六进制字符串转换为 CryptoJS 所使用的 WordArray 对象。

对于 AES 加密算法，输入数据通常是 WordArray 类型。WordArray 是 CryptoJS 中用于表示二进制数据的数据结构。

示例

js复制代码const CryptoJS = require('crypto-js'); 
const hexString = '48656c6c6f2c20576f726c6421'; 
// 将十六进制字符串转换为 WordArray 对象 
const wordArray = CryptoJS.enc.Hex.parse(hexString); 
console.log(wordArray);

CryptoJS.lib.WordArray.create

💡
CryptoJS.lib.WordArray.create 可以将字节数组（Uint8Array）转换为 CryptoJS 的 WordArray 对象。

直接使用 new Uint8Array 创建的字节数组作为初始向量（iv）或密钥（key），在 CryptoJS 中可能会导致报错。这是因为 CryptoJS 的加密方法期望的是一个 CryptoJS 的WordArray 对象作为初始向量，而不是原始的字节数组。

CryptoJS.enc.Utf8.parse

💡
CryptoJS.enc.Utf8.parse 是 CryptoJS 中的一个方法，用于将 UTF-8 编码的字符串转换为 WordArray 对象。

示例

js复制代码const CryptoJS = require('crypto-js'); 
const str = 'Hello, World!'; // 将 UTF-8 编码的字符串转换为 WordArray 对象 
const wordArray = CryptoJS.enc.Utf8.parse(str); 
console.log(wordArray);

💡CryptoJS.AES.encrypt参数说明：

message：要加密的消息，可以是字符串或 WordArray 对象。CryptoJS.AES.encrypt 方法是用于加密字符串或字节数组的，如果您想要加密一个对象，您需要先将对象转换为字符串或字节数组，然后再进行加密。 key：加密密钥。可以是字符串、WordArray 对象或 WordArray 可转换为字符串的格式（如十六进制字符串）。

密钥的长度必须为 128 位（16 字节），因为 AES-CBC-128 使用 128 位的密钥。如果密钥长度不符合要求，将无法正确执行加密和解密操作。

options：加密选项。一个包含 iv（初始向量）等属性的对象。 iv：初始向量的长度也必须为 128 位（16 字节），与密钥长度相同。初始向量用于增加加密的随机性和安全性。 padding（填充）：CryptoJS.pad.ZeroPadding 表示使用 Zero Padding（零填充）模式进行数据填充。当要加密的数据长度不是分组长度的整数倍时，需要进行填充操作以满足分组加密的要求。Zero Padding 是一种常见的填充方式，它在数据的末尾添加零字节，使数据长度变为分组长度的整数倍。 mode（加密模式）：CryptoJS.mode.CBC 表示使用 CBC（Cipher Block Chaining，密码分组链接）模式进行加密。CBC 是一种常用的分组密码模式，它通过将前一个加密分组的密文与当前分组的明文进行异或运算，增加了密码的随机性和安全性。在 CBC 模式中，还需要提供一个初始化向量（IV）作为额外的参数 返回值（加密结果）：一个 CipherParams 对象。

加密对象示例

js复制代码const CryptoJS = require('crypto-js');const key = 'your-key'; // 密钥
const iv = 'your-iv'; // 初始化向量// 要加密的对象
const objectToEncrypt = { name: 'John', age: 30 };// 将对象转换为字符串
const jsonString = JSON.stringify(objectToEncrypt);// 将字符串转换为 WordArray 对象
const data = CryptoJS.enc.Utf8.parse(jsonString);// 使用 CryptoJS 进行 AES 加密
const encrypted = CryptoJS.AES.encrypt(data, key, { iv }).toString();console.log(encrypted);

WordArray

💡
WordArray 对象是 CryptoJS 中用于表示字节序列的抽象。它提供了一系列方法和功能，用于在加密、解密和其他操作中处理字节序列

js复制代码// 将 WordArray 对象还原为字节数组 
const byteArray = Array.from(wordArray.sigBytes === 0 ? \[] : new Uint8Array(wordArray.words.buffer));

其他加密插件：

在 JavaScript 中，有多个库可以用于实现 AES-CBC-128 算法加密。以下是一些常用的库：

  1. CryptoJS：CryptoJS 是一个流行的加密库，它提供了丰富的加密算法支持，包括 AES-CBC。您可以使用 CryptoJS.AES.encrypt 函数来进行 AES-CBC-128 加密。它是一个纯 JavaScript 实现的库，易于使用。
  • 可以通过 npm 安装：

npm install crypto-js

  • 官方文档：cryptojs.gitbook.io/docs/
  1. Forge：Forge 是一个强大的加密和密码学库，提供了多种加密算法的实现，包括 AES-CBC。您可以使用 forge.cipher.createCipher 函数进行 AES-CBC-128 加密。
  • 可以通过 npm 安装：

npm install node-forge

  • 官方文档：github.com/digitalbaza…
  1. SJCL：Stanford Javascript Crypto Library（SJCL）是一个全功能的加密库，支持多种加密算法，包括 AES-CBC。它旨在提供安全可靠的加密功能。
  • 可以通过 npm 安装：

npm install sjcl

  • 官方文档：bitwiseshiftleft.github.io/sjcl/
  1. WebCrypto API：现代浏览器提供了 WebCrypto API，它是一个原生的加密 API，支持多种加密算法，包括 AES-CBC。使用 WebCrypto API 可以在浏览器中进行高性能的加密操作。
  • 可以直接在现代浏览器中使用，无需安装额外的库。 MDN 文档：developer.mozilla.org/en-US/docs/…

在 JavaScript 社区中，CryptoJS 是最常用和广泛使用的加密库之一。它有许多用户和开发者使用它来进行数据加密和解密操作。

CryptoJS 提供了简单易用的 API，并支持多种常见的加密算法，包括 AES、DES、3DES、RC4、SHA 等。它的使用方式灵活，适合用于各种项目和应用场景。是一个成熟且稳定的库，拥有广泛的文档和社区支持。相对而言，CryptoJS 在 JavaScript 社区中的知名度和使用率更高。

aescbc-128解密（解析res.data）

const ac = "aaabbbccc"

token: "aaabbbccc"

  1. const aeskeystr := Blake128Calc([]byte(ac + timestamp)) // timestamp
  2. 解密body，解密key为 HexDecode(aeskeystr)，iv为HexDecode(token)

接口返回二进制流：

截图 (1).png

 

设定responseType：‘arraybuffer’

  • 将 ArrayBuffer 转换为 Uint8Array
js复制代码
if (res.request.responseType === 'arraybuffer') { const uint8Array = new Uint8Array(res.data) // 将 ArrayBuffer 转换为 Uint8Array return decryptApiBody(ac, token, String(timestamp), uint8Array) 
}

js复制代码export const decryptApiBody = (ac: string,token: string,timestamp: string,data: any
) => {const aeskeystr = calcBlake2b(ac + timestamp)const key = CryptoJS.enc.Hex.parse(aeskeystr)const iv = CryptoJS.enc.Hex.parse(token)// data: Uint8Array转为字符串const ciphertext = CryptoJS.enc.Base64.stringify(CryptoJS.lib.WordArray.create(data))// 解密const decrypted = CryptoJS.AES.decrypt(ciphertext, key, { iv })// 解密结果直接转为Uint8Array会出现多余字符，导致JSON.parse失败，所以先转为Base64// 将解密结果转换为 Base64 字符串const decryptedBase64 = decrypted.toString(CryptoJS.enc.Base64)// 将 Base64 字符串转换为 Uint8Arrayconst decodedString1 = window.atob(decryptedBase64) // base64解码const decryptedUint8Array = new Uint8Array(decodedString1.length)for (let i = 0; i < decodedString1.length; i++) {decryptedUint8Array[i] = decodedString1.charCodeAt(i)}// 将 Uint8Array 转换为字符串const textDecoder = new TextDecoder('utf-8')const decodedString = textDecoder.decode(decryptedUint8Array)return decodedString ? JSON.parse(decodedString) : {}
}

CryptoJS.enc.Base64.stringify

💡
CryptoJS.enc.Base64.stringify 方法将 Uint8Array 密文数据转换为 Base64 编码的字符串。

Uint8Array不能直接作为解密参数。转为WordArray也不行

CryptoJS.AES.encrypt(....).toString()

💡
toString默认行为是将加密后的数据转换为base64编码的字符串。

toString方法还接受一个可选的参数，用于指定输出格式。

例如，如果你想要将加密结果转换为Hex字符串:

decrypted.toString(CryptoJS.enc.hex)

但在有些情况下，toString()结果与encrypted.toString(CryptoJS.enc.Base64)不同，这可能与传入的message格式有关 ？（存疑）

例如这个例子中，在加密时encrypted.toString()、encrypted.toString(CryptoJS.enc.Base64)、encrypted.toString(CryptoJS.enc.hex)三种形式输出结果相同； 在解密时encrypted.toString()与encrypted.toString(CryptoJS.enc.hex)结果相同，与encrypted.toString(CryptoJS.enc.Base64)不同；

💡坑点

将解密后的数据decrypted转换为 Uint8Array 的话，decodedString会出现多余字符串，导致JSON.parse失败：

猜测是由于：

如果将 Uint8Array 直接转换为字符串，可能会产生额外的字符，这是因为字符串的构造方式和编码方式的差异。

在 JavaScript 中，使用默认的字符串构造函数将 Uint8Array 转换为字符串时，它会尝试将字节序列解释为 UTF-16 编码的字符。如果 Uint8Array 中的字节序列无法正确解码为有效的 UTF-16 字符，则会出现乱码或额外的字符。

所以先把decrypted转为base64，再转Uint8Array

 

这篇关于【关于前端加密】CryptoJS与blake2b实践的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/210308。

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio
阅读更多...
tomcat多实例部署的项目实践

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录，测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的
阅读更多...
Python 中的异步与同步深度解析(实践记录)

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步：深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步
阅读更多...
Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
springboot集成Deepseek4j的项目实践

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶
阅读更多...
SpringBoot3使用Jasypt实现加密配置文件

SpringBoot3使用Jasypt实现加密配置文件

《SpringBoot3使用Jasypt实现加密配置文件》这篇文章主要为大家详细介绍了SpringBoot3如何使用Jasypt实现加密配置文件功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编... 目录一. 使用步骤1. 添加依赖2.配置加密密码3. 加密敏感信息4. 将加密信息存储到配置文件中5
阅读更多...
SpringBoot整合jasypt实现重要数据加密

SpringBoot整合jasypt实现重要数据加密

《SpringBoot整合jasypt实现重要数据加密》Jasypt是一个专注于简化Java加密操作的开源工具,：本文主要介绍详细介绍了如何使用jasypt实现重要数据加密,感兴趣的小伙伴可... 目录jasypt简介 jasypt的优点SpringBoot使用jasypt创建mapper接口配置文件加密
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2