前后端数据传输加密：Python 与 Vue 的实践

Python与Vue实现接口数据加密传输

在当今互联网应用开发中，数据安全是重中之重。尤其是在前后端进行数据交互时，确保传输数据的保密性、完整性和可用性，是每一位开发者不可忽视的关键环节。本文将深入探讨如何运用Python后端和Vue前端技术，实现接口数据传输过程中的加密处理，为大家揭开数据安全保护的神秘面纱。

加密基石：AES算法

我们选用的加密算法是AES（Advanced Encryption Standard），它作为一种对称加密算法，在数据加密领域被广泛应用。AES算法以其高效性和出色的安全性，为数据传输保驾护航。在我们的代码实现中，采用了AES的CBC（Cipher Block Chaining）模式，并搭配PKCS7填充方式，以此保证数据在加密和解密过程中的精准性与完整性。

Python后端加密的实现剖析

加密核心代码解读

from Crypto.Cipher import AES
from Crypto.Util.Padding import pad, unpad
import base64

SECRET_KEY = b'12345678qwertyui'  # 16字节
IV = b'12345678qwertyui'  # 16字节

def decrypt_data(ciphertext: str) -> dict:
    cipher = AES.new(SECRET_KEY, AES.MODE_CBC, IV)
    decrypted = unpad(cipher.decrypt(base64.b64decode(ciphertext)), AES.block_size)
    return eval(decrypted.decode('utf-8'))

def encrypt_data(data: dict) -> str:
    cipher = AES.new(SECRET_KEY, AES.MODE_CBC, IV)
    json_data = str(data).encode('utf-8')
    encrypted = cipher.encrypt(pad(json_data, AES.block_size))
    return base64.b64encode(encrypted).decode('utf-8')

在这段Python后端代码中，首先导入了Crypto.Cipher中的AES模块以及Crypto.Util.Padding中的pad和unpad函数，分别用于数据的加密解密以及填充和去填充操作。同时，引入base64模块，负责进行Base64编码和解码工作。

紧接着定义了SECRET_KEY和IV，它们均为16字节的字节串，这两个关键参数在加密和解密流程中起着核心作用。SECRET_KEY用于生成加密密钥，而IV（Initialization Vector）则用于初始化加密过程，极大地增强了加密的安全性。

decrypt_data函数承担着将接收到的密文进行解密的重任。它先借助SECRET_KEY和IV创建一个AES对象，然后对经过Base64解码后的密文执行解密操作，接着通过unpad函数去除填充的数据，最后将解密后的字节串转换为字典形式并返回。

encrypt_data函数的操作则与decrypt_data相反。它先把输入的字典数据转换为JSON格式的字节串，利用pad函数进行填充处理，再通过AES对象完成加密，最后将加密后的结果进行Base64编码，以字符串形式返回密文。

接口处理逻辑

@app.route('/kgqa', methods=['POST'])
def kgqa():
    print("收到请求")
    print(request)
    # data = request.get_json()
    data = request.data
    print(data)
    data = decrypt_data(data)
    print(data)
    appId = data.get('appId')
    userId = data.get('userId')
    chatId = data.get('chatId')
    # chatItemId = data.get('chatItemId')
    chatItemId = generate_unique_id()
    question = data.get('question')

这部分代码定义了一个基于Flask框架的路由/kgqa，专门用于处理前端发送过来的POST请求。在函数内部，首先打印出接收到的请求信息，以便开发者进行调试和监控。随后获取请求体中的数据，由于数据是加密传输的，所以需要调用之前定义的decrypt_data函数进行解密。解密后的数据是一个字典，从该字典中提取出appId、userId、chatId和question等关键信息，这些信息将用于后续的业务逻辑处理。

Vue前端加密的实现细节

加密函数解析

import CryptoJS from 'crypto-js';

const SECRET_KEY = CryptoJS.enc.Utf8.parse('12345678qwertyui'); // 16字节
const IV = CryptoJS.enc.Utf8.parse('12345678qwertyui'); // 16字节

export function encryptData(data: object): string {
  const jsonData = JSON.stringify(data);
  const encrypted = CryptoJS.AES.encrypt(jsonData, SECRET_KEY, {
    iv: IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  return encrypted.toString();
}

export function decryptData(ciphertext: string): object {
  const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY, {
    iv: IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  const decryptedData = bytes.toString(CryptoJS.enc.Utf8);
  return JSON.parse(decryptedData);
}

在Vue前端代码中，通过import语句引入了功能强大的crypto-js库，该库为我们提供了丰富的加密功能。同样定义了SECRET_KEY和IV，并且确保与后端的设置完全一致，这两个参数在前端的加密和解密操作中起着关键作用。

encryptData函数负责将输入的对象数据转换为JSON字符串，然后利用CryptoJS.AES.encrypt方法进行加密。在加密过程中，传入了SECRET_KEY、IV，并明确指定了加密模式为CBC，填充方式为Pkcs7。最后将加密后的结果转换为字符串形式并返回。

decryptData函数则承担着将接收到的密文字符串进行解密的任务。它通过调用CryptoJS.AES.decrypt方法，传入密文、SECRET_KEY、IV以及加密模式和填充方式，将解密后的字节串转换为UTF - 8编码的字符串，再借助JSON.parse方法将其转换为对象并返回。

接口调用流程

import type { ChatMessage } from "@/types";
import { encryptData } from './crypto.ts';

export async function chat(message: string, apiKey: string) {
  try {
    const result = await fetch("http://localhost:8000/kgqa", {
      method: "post",
      // signal: AbortSignal.timeout(8000),
      // 开启后到达设定时间会中断流式输出
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey}`,
      },
      body: encryptData({
        appId: "ai-assistant",
        userId: "user-1",
        chatId: "",
        question: message,
      }),
    });
    return result;
  } catch (error) {
    throw error;
  }
}

这部分代码定义了一个名为chat的函数，主要用于与后端的/kgqa接口进行通信。在函数内部，使用fetch方法发送POST请求。在请求头中，设置了Content-Type为application/json，以表明请求体的数据格式；同时添加了Authorization字段，用于身份验证。在请求体中，通过调用encryptData函数，将包含appId、userId、chatId和question等信息的数据对象进行加密后再发送。如果在请求过程中出现错误，函数将捕获并抛出异常，以便开发者及时处理。

总结与展望

通过上述Python后端和Vue前端的代码实现，我们成功地在前后端数据传输过程中应用了AES加密算法，为数据安全筑起了一道坚实的防线。然而，在实际应用中，我们还需高度重视密钥的管理和保护工作，避免因密钥泄露而引发严重的数据安全风险。同时，随着技术的不断进步和发展，我们应持续关注加密算法的安全性更新，及时调整和优化加密方案，以更好地应对日益复杂的网络安全挑战，为用户数据提供更加可靠、全方位的保障。

希望本文能为广大开发者在前后端数据传输加密方面提供有价值的参考和借鉴，助力大家在开发过程中打造出更加安全、可靠的互联网应用。