资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

前端如何使用AES加密

创作时间:

作者:

@小白创作中心

前端如何使用AES加密

引用

来源

https://docs.pingcode.com/baike/2199837

随着互联网技术的不断发展，数据安全已成为一个日益重要的问题。前端开发中，AES加密作为一种强大的数据保护手段，被广泛应用于用户敏感数据保护、数据完整性验证和安全通信等场景。本文将详细介绍如何在前端使用AES加密，包括选择合适的加密库、生成密钥、加密数据和解密数据等关键步骤。

一、选择合适的加密库

在前端，选择一个可靠的加密库至关重要。CryptoJS是一个广泛使用的JavaScript库，简单易用且功能强大。Web Crypto API是现代浏览器内置的API，提供了更高的安全性和性能。

1. CryptoJS

CryptoJS是一个著名的JavaScript库，支持多种加密算法，包括AES。它的优势在于简单易用，兼容性好，适合快速开发。

安装与引入

在项目中使用CryptoJS非常简单，可以通过NPM安装：

npm install crypto-js

然后在代码中引入：

const CryptoJS = require("crypto-js");

2. Web Crypto API

Web Crypto API是现代浏览器提供的原生API，性能和安全性都优于第三方库，但相对来说，使用起来稍复杂。

使用

无需安装，直接在代码中调用：

window.crypto.subtle

二、生成密钥

1. 使用CryptoJS生成密钥

CryptoJS可以直接使用字符串作为密钥，但建议使用随机生成的密钥以提高安全性。以下示例生成一个随机密钥：

const key = CryptoJS.lib.WordArray.random(16); // 128-bit key
console.log(key.toString());

2. 使用Web Crypto API生成密钥

Web Crypto API生成密钥的过程更复杂，但安全性更高：

window.crypto.subtle.generateKey(
  {
    name: "AES-GCM",
    length: 256,
  },
  true,
  ["encrypt", "decrypt"]
).then((key) => {
  console.log(key);
});

三、加密数据

1. 使用CryptoJS加密数据

CryptoJS提供了简单的加密方法，以下示例加密一段文本：

const key = CryptoJS.enc.Utf8.parse('1234567890123456'); // Example key
const plaintext = "Hello, World!";
const ciphertext = CryptoJS.AES.encrypt(plaintext, key, {
  mode: CryptoJS.mode.ECB,
  padding: CryptoJS.pad.Pkcs7
}).toString();
console.log(ciphertext);

2. 使用Web Crypto API加密数据

Web Crypto API加密数据需要更多步骤，但更具灵活性：

const textEncoder = new TextEncoder();
const data = textEncoder.encode("Hello, World!");
window.crypto.subtle.generateKey(
  {
    name: "AES-GCM",
    length: 256,
  },
  true,
  ["encrypt", "decrypt"]
).then((key) => {
  return window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: window.crypto.getRandomValues(new Uint8Array(12)),
    },
    key,
    data
  );
}).then((ciphertext) => {
  console.log(new Uint8Array(ciphertext));
});

四、解密数据

1. 使用CryptoJS解密数据

解密数据的过程与加密相似：

const key = CryptoJS.enc.Utf8.parse('1234567890123456'); // Example key
const ciphertext = '...'; // Encrypted text
const bytes = CryptoJS.AES.decrypt(ciphertext, key, {
  mode: CryptoJS.mode.ECB,
  padding: CryptoJS.pad.Pkcs7
});
const plaintext = bytes.toString(CryptoJS.enc.Utf8);
console.log(plaintext);

2. 使用Web Crypto API解密数据

解密数据时需要确保使用与加密时相同的密钥和初始化向量：

const textEncoder = new TextEncoder();
const data = textEncoder.encode("Hello, World!");
let key;
window.crypto.subtle.generateKey(
  {
    name: "AES-GCM",
    length: 256,
  },
  true,
  ["encrypt", "decrypt"]
).then((generatedKey) => {
  key = generatedKey;
  return window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: window.crypto.getRandomValues(new Uint8Array(12)),
    },
    key,
    data
  );
}).then((ciphertext) => {
  return window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
      iv: window.crypto.getRandomValues(new Uint8Array(12)),
    },
    key,
    ciphertext
  );
}).then((plaintext) => {
  console.log(new TextDecoder().decode(plaintext));
});