前端面试题5（前端常见的加密方式）

news2024/11/20 2:46:13

在这里插入图片描述

前端常见的加密方式

在前端进行数据加密主要是为了保护用户的隐私和提升数据传输的安全性。前端数据加密可以采用多种方法，以下是一些常见的加密技术和方法：

1. HTTPS

虽然不是直接的前端加密技术，但HTTPS是保障前端与后端数据传输安全的基础。HTTPS通过SSL/TLS协议对通信内容进行加密，可以有效防止数据在传输过程中被窃取或篡改。

2. JavaScript 加密库

有许多JavaScript库可以帮助你在前端实现数据加密，以下是一些常用的库：

CryptoJS：一个流行的JavaScript加密库，支持AES、DES、RSA、SHA等众多加密算法。

// CryptoJS 示例 - AES 加密
var CryptoJS = require("crypto-js");
var message = "Hello, this is a secret message";
var secretKey = "my-secret-key-123";

var encrypted = CryptoJS.AES.encrypt(message, secretKey);
var decrypted = CryptoJS.AES.decrypt(encrypted.toString(), secretKey);

console.log("Encrypted:", encrypted.toString());
console.log("Decrypted:", decrypted.toString(CryptoJS.enc.Utf8));

jsencrypt：一个轻量级的RSA公钥/私钥加密库。

// jsencrypt 示例
var JSEncrypt = require('jsencrypt').JSEncrypt;

var encryptor = new JSEncrypt();
encryptor.setPublicKey(`-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzU2j...
-----END PUBLIC KEY-----`);

var plaintext = "Hello, this is a secret message";
var ciphertext = encryptor.encrypt(plaintext);
console.log("Encrypted Text:", ciphertext);

3. Web Cryptography API

Web Cryptography API是HTML5的一部分，提供了原生的加密功能，支持各种加密操作，如生成密钥、加密解密数据等。

// Web Cryptography API 示例 - 生成AES密钥并加密数据
async function encryptMessage(message) {
    const subtle = window.crypto.subtle;
    const key = await subtle.generateKey(
        {name: "AES-GCM", length: 256},
        true,
        ["encrypt", "decrypt"]
    );

    const iv = window.crypto.getRandomValues(new Uint8Array(12));
    const ciphertextBuffer = await subtle.encrypt(
        {name: "AES-GCM", iv},
        key,
        new TextEncoder().encode(message)
    );
    
    return {ciphertext: new Uint8Array(ciphertextBuffer), iv};
}

// 使用示例
encryptMessage("Secret Message").then(({ciphertext, iv}) => {
    console.log("Ciphertext:", ciphertext);
    console.log("IV:", iv);
});