Vue项目中实现AES加密解密的全过程_Javascript

前言

在前端开发中，保护用户数据的安全性至关重要。aes（高级加密标准）作为一种广泛使用的对称加密算法，因其高效性和安全性而受到青睐。本文将介绍如何在vue项目中实现aes加密解密，包括ecb和cbc两种模式。

项目中用到aes算法做传输加密的优点。

1、对内存的需求非常低，适合于受限环境。

2、运算速度快。

3、分组长度和密钥长度设计灵活。

4、很好的抵抗差分密码分析及线性密码分析的能力。

5、aes的密钥长度比des大，它也可设定为32比特的任意倍数，最小值为128比特，最大值为256比特，所以用穷举法是不可能破解的。

环境搭建

在vue项目中使用aes加密解密功能之前，需要先安装crypto-js库。通过执行以下命令，可以轻松地将crypto-js添加到项目中：

npm install crypto-js --save-dev

封装aes加密解密方法

接下来，我们将在vue项目的util目录下创建一个名为aes.js的文件，用于封装aes加密解密的方法。

ecb模式

ecb（电子密码本模式）是一种简单的加密方式，将数据分成固定长度的块进行加密。以下是ecb模式的加密和解密方法：

import cryptojs from 'crypto-js';

/**
 * aes加密处理（ecb模式）
 */
export function encryptecb(plainttext) {
    var plainttext = plainttext;
    var options = {
        mode: cryptojs.mode.ecb,
        padding: cryptojs.pad.pkcs7
    };
    var key = cryptojs.enc.utf8.parse("abcdefgabcdefg12"); //秘钥
    var encrypteddata = cryptojs.aes.encrypt(plainttext, key, options);
    var encryptedbase64str = encrypteddata.tostring().replace(/\//g, "_");
    encryptedbase64str = encryptedbase64str.replace(/\+/g,"-");
    return encryptedbase64str;
}
/**
 * aes解密处理（ecb模式）
 */
export function decryptecb(encryptedbase64str) {
    var vals = encryptedbase64str.replace(/\-/g, '+').replace(/_/g, '/');
    var options = {
        mode: cryptojs.mode.ecb,
        padding: cryptojs.pad.pkcs7
    };
    var key = cryptojs.enc.utf8.parse("abcdefgabcdefg12"); //秘钥
    var decrypteddata = cryptojs.aes.decrypt(vals, key, options);
    var decryptedstr = cryptojs.enc.utf8.stringify(decrypteddata);
    return decryptedstr
}

cbc模式

cbc（密码块链接模式）通过使用前一个块的加密结果来影响当前块的加密过程，从而提高安全性。以下是cbc模式的加密和解密方法：

import cryptojs from 'crypto-js'

/**
 * aes加密处理（cbc模式）
 */
export function encryptcbc(word, keystr, ivstr) {
    keystr = keystr ? keystr : "abcdefgabcdefg12";
    ivstr = ivstr ? ivstr : "!@#$%asdfg12345";
    let key = cryptojs.enc.utf8.parse(keystr);
    let iv = cryptojs.enc.utf8.parse(ivstr);
    let srcs = cryptojs.enc.utf8.parse(word);
    let encrypted = cryptojs.aes.encrypt(srcs, key, {
        iv,
        mode: cryptojs.mode.cbc,
        padding: cryptojs.pad.zeropadding
    })
    return encrypted.tostring()
}
/**
 * aes解密处理（cbc模式）
 */
 export function decryptcbc(word, keystr, ivstr) {
    word = (word + '').replace(/\n*$/g, '').replace(/\n/g, ''); //增加这一行，将换行符替换为空
    keystr = keystr ? keystr : "abcdefgabcdefg12";
    ivstr = ivstr ? ivstr : "!@#$%asdfg12345";
    var key = cryptojs.enc.utf8.parse(keystr);
    let iv = cryptojs.enc.utf8.parse(ivstr);
    var decrypt = cryptojs.aes.decrypt(word, key, {
        iv,
        mode: cryptojs.mode.cbc,
        padding: cryptojs.pad.zeropadding
    })
    return decrypt.tostring(cryptojs.enc.utf8)
}

使用方法

在vue组件中，您可以导入并使用这些方法来加密和解密数据。例如：

import { encryptecb, decryptecb, encryptcbc, decryptcbc } from "@/util/aes";

// 使用cbc模式加密websocket url
const encrypted = encryptcbc("ws://192.168.30.110:15674/ws");
console.log(encrypted); // 输出加密后的数据:o6hoy/k1qz+0eymsciwxtzucexkdq9ewxkdsiecwf9c=

const decrypted = decryptcbc(encrypted);
console.log(decrypted); // 输出解密后的数据:ws://192.168.30.110:15674/ws