CryptoJS中AES实现前后端通用加解密技术

yizhihongxing

CryptoJS是一个流行的JavaScript加密库,提供了诸如AES、SHA-1、SHA-256等常用的加密算法。在前后端通信过程中,为了增加数据的安全性,我们常常需要对数据进行加密。本文将详细介绍如何使用CryptoJS中AES实现前后端通用加解密技术。

1. CryptoJS简介

CryptoJS是一种纯JavaScript库,可用于各种加密算法和解密算法,也可用于哈希函数。它支持两种加密模式:流加密模式和块加密模式。加密算法包括AES、DES、TripleDES、RC4等。

2. 前端加密实现

首先,我们需要引入CryptoJS的核心库和AES模块,如下所示:

<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/enc-base64.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/aes.min.js"></script>

接下来,我们可以使用如下的AES加密和解密函数:

// AES加密
function aesEncrypt(data, secretKey) {
    let key = CryptoJS.enc.Utf8.parse(secretKey);
    let iv = CryptoJS.enc.Utf8.parse(secretKey);
    let encrypted = CryptoJS.AES.encrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

// AES解密
function aesDecrypt(data, secretKey) {
    let key = CryptoJS.enc.Utf8.parse(secretKey);
    let iv = CryptoJS.enc.Utf8.parse(secretKey);
    let decrypted = CryptoJS.AES.decrypt(data, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

其中,data为要加密或解密的数据,secretKey为密钥。

3. 后端加密实现

在后端的加密过程中,我们可以使用Java的CryptoJS库。首先,我们需要将前端的AES加密函数所使用的密钥转换为Java中的密钥格式,示例如下:

// 将前端密钥进行转换
private static SecretKeySpec getKey(String key) throws Exception {
    byte[] rawKey = key.getBytes(StandardCharsets.UTF_8);
    byte[] keyBytes = new byte[16];
    int len = rawKey.length;
    if (len > keyBytes.length) {
        len = keyBytes.length;
    }
    System.arraycopy(rawKey, 0, keyBytes, 0, len);
    return new SecretKeySpec(keyBytes, "AES");
}

然后,我们可以使用如下的Java函数进行AES加密和解密:

// AES加密
public static String aesEncrypt(String data, String secretKey) throws Exception {
    SecretKeySpec key = getKey(secretKey);
    byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
    IvParameterSpec ivSpec = new IvParameterSpec(iv);
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.ENCRYPT_MODE, key, ivSpec);
    byte[] encrypted = cipher.doFinal(data.getBytes());
    return Base64.getEncoder().encodeToString(encrypted);
}

// AES解密
public static String aesDecrypt(String data, String secretKey) throws Exception {
    SecretKeySpec key = getKey(secretKey);
    byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
    IvParameterSpec ivSpec = new IvParameterSpec(iv);
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
    cipher.init(Cipher.DECRYPT_MODE, key, ivSpec);
    byte[] decrypted = cipher.doFinal(Base64.getDecoder().decode(data));
    return new String(decrypted, StandardCharsets.UTF_8);
}

其中,data为要加密或解密的数据,secretKey为密钥。

4. 示例说明

下面,我们分别以前端React框架和后端Spring Boot框架为例,演示如何使用CryptoJS中AES实现前后端通用加解密技术。

前端示例

import CryptoJS from 'crypto-js';

const secretKey = '123456';

// 加密数据
const data = 'hello world';
const encryptedData = aesEncrypt(data, secretKey);
console.log('encryptedData:', encryptedData);

// 解密数据
const decryptedData = aesDecrypt(encryptedData, secretKey);
console.log('decryptedData:', decryptedData);

后端示例

import java.nio.charset.StandardCharsets;
import java.util.Base64;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;

public class CryptoUtil {

    private static SecretKeySpec getKey(String key) throws Exception {
        byte[] rawKey = key.getBytes(StandardCharsets.UTF_8);
        byte[] keyBytes = new byte[16];
        int len = rawKey.length;
        if (len > keyBytes.length) {
            len = keyBytes.length;
        }
        System.arraycopy(rawKey, 0, keyBytes, 0, len);
        return new SecretKeySpec(keyBytes, "AES");
    }

    public static String aesEncrypt(String data, String secretKey) throws Exception {
        SecretKeySpec key = getKey(secretKey);
        byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
        IvParameterSpec ivSpec = new IvParameterSpec(iv);
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        cipher.init(Cipher.ENCRYPT_MODE, key, ivSpec);
        byte[] encrypted = cipher.doFinal(data.getBytes());
        return Base64.getEncoder().encodeToString(encrypted);
    }

    public static String aesDecrypt(String data, String secretKey) throws Exception {
        SecretKeySpec key = getKey(secretKey);
        byte[] iv = secretKey.getBytes(StandardCharsets.UTF_8);
        IvParameterSpec ivSpec = new IvParameterSpec(iv);
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        cipher.init(Cipher.DECRYPT_MODE, key, ivSpec);
        byte[] decrypted = cipher.doFinal(Base64.getDecoder().decode(data));
        return new String(decrypted, StandardCharsets.UTF_8);
    }

    public static void main(String[] args) throws Exception {
        String secretKey = "123456";

        // 加密数据
        String data = "hello world";
        String encryptedData = aesEncrypt(data, secretKey);
        System.out.println("encryptedData:" + encryptedData);

        // 解密数据
        String decryptedData = aesDecrypt(encryptedData, secretKey);
        System.out.println("decryptedData:" + decryptedData);
    }
}

在以上两个示例中,我们都使用了123456作为密钥对hello world进行加解密,并输出了加密和解密的结果。

总结

本文介绍了CryptoJS中AES实现前后端通用加解密技术的完整攻略,包括前端和后端的加密实现方法以及示例说明。通过本文的学习,我们可以更好地保障数据的安全性,在前后端通信过程中更加安全可靠地传输数据。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CryptoJS中AES实现前后端通用加解密技术 - Python技术站

(1)
上一篇 2023年5月29日
下一篇 2023年5月29日

相关文章

  • vue中为何方法要写在methods的里面

    在Vue中,我们使用methods对象来存储Vue实例中的方法。之所以要将方法写在methods中,是因为Vue框架在初始化Vue实例时,需要遍历所有的data、computed、watch和methods,以及vue定义的生命周期钩子函数,以便进行响应式的绑定与更新。 在methods中定义的方法可以在Vue模板绑定中通过v-on指令进行调用,也可以通过V…

    Vue 2023年5月28日
    00
  • Vue组件通信$attrs、$listeners实现原理解析

    我来为您详细讲解“Vue组件通信$attrs、$listeners实现原理解析”的完整攻略。 一、背景介绍 在Vue组件的开发中,如何实现父子组件之间的通信一直是一个比较困扰开发者的难点。Vue官方提供的有prop、$emit、$parent/$children、$refs等方法,而$attrs和$listeners则是比较特殊的属性,不仅可以实现父子组件的…

    Vue 2023年5月28日
    00
  • VueJs 搭建Axios接口请求工具

    VueJs 搭建 Axios 接口请求工具可以分为以下几个步骤: 1. 安装 Axios 首先,在 VueJs 中使用 Axios 需要先安装 Axios 库。可以使用 npm 命令进行安装(前提是已经安装了 npm): npm install axios 2. 创建请求服务 可以在 Vue 项目中新建一个 services 文件夹,在其中创建 api.js…

    Vue 2023年5月28日
    00
  • 解决vue select当前value没有更新到vue对象属性的问题

    我将为您详细讲解“解决Vue Select当前Value没有更新到Vue对象属性的问题”的完整攻略。 简介 在Vue开发中,我们通常会使用Vue Select组件来实现下拉选择框。但是在使用过程中,会发现Vue Select的value属性不能够及时更新到Vue对象中的属性,导致无法实现数据的双向绑定。本文将为大家提供解决这个问题的完整攻略。 解决方案 解决…

    Vue 2023年5月28日
    00
  • webstorm激活码注册码最新2021(亲测,有效期至2089)附详细安装教程

    WebStorm激活码注册码最新2021攻略 简介 WebStorm是一款由JetBrains公司推出的基于IntelliJ平台的JavaScript IDE,它支持流行的Web开发工具,并且在代码开发效率、代码智能提示、代码调试等方面具有强大的功能。但是该软件需要购买才能正式使用,本文将介绍WebStorm激活码注册码最新2021攻略,以便大家可以更方便快…

    Vue 2023年5月28日
    00
  • vue3的动态组件是如何工作的

    Vue3 的动态组件相比于 Vue2 有了较大的改变,本文将详细讲解 Vue3 的动态组件是如何工作的,包括其实现原理和示例说明。 什么是动态组件 Vue 中的组件是指可复用并具有独立功能的代码块,根据其作用域及其之间的交互可以实现复杂的组件化应用。而动态组件,顾名思义指在运行时可以动态地切换所渲染的组件。 Vue3 中动态组件的实现原理 在 Vue2 中,…

    Vue 2023年5月27日
    00
  • vue日期选择框之时间范围的使用介绍

    Vue 日期选择框之时间范围的使用介绍 在 Vue 中,使用日期选择框可以方便用户选择时间。在某些场景下,我们需要选择起始时间和截止时间之间的时间段。本文将介绍如何在 Vue 中使用日期时间范围选择框。 引入组件 Vue.Datepicker 组件是一个支持时间范围选择的日期选择框组件。我们可以通过代码库或者 CDN 引入该组件。 <!– 通过 CD…

    Vue 2023年5月28日
    00
  • 详解Vue3.0 + TypeScript + Vite初体验

    我来详细讲解“详解Vue3.0 + TypeScript + Vite初体验”的完整攻略。 什么是Vue3.0 Vue3.0是一款流行的前端JavaScript框架,专注于构建用户界面。它提供了一系列的工具和API,使得开发单页应用变得更加容易和高效。Vue3.0采用了一系列的新特性,例如Composition API,优化了性能和代码维护难度。 为什么要使…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部