Django HMAC 请求签名校验与 Vue.js 实现安全通信

概要

在 Web 应用的开发过程中，确保数据传输的安全性和完整性是一个不容忽视的问题。使用 HMAC（Hash-based Message Authentication Code）算法对请求内容进行签名校验，是一种常见且有效的安全策略。本文将详细介绍如何在 Django 后端实现 HMAC 签名校验，并展示如何在前端 Vue.js 应用中生成对应的签名，从而确保前后端通信的安全性。

1. Django 后端实现

步骤 1: 安装所需库

在 Django 项目中，我们首先确保安装了 hmac 和 hashlib，这些通常是 Python 标准库的一部分。

步骤 2: 创建签名生成函数

在 Django 应用中，创建一个函数来生成基于 HMAC 的签名。

import hmac
import hashlibdef generate_hmac_signature(method, accept, content_type, path, body, secret_key):msg = f"{method}{accept}{content_type}{path}{body}"return hmac.new(secret_key.encode(), msg.encode(), hashlib.sha256).hexdigest()

步骤 3: 创建中间件进行签名校验

创建一个 Django 中间件来验证传入请求的签名。

# middleware.py
from django.http import JsonResponseclass HmacAuthenticationMiddleware:def __init__(self, get_response):self.get_response = get_responsedef __call__(self, request):secret_key = 'your-secret-key'request_signature = request.headers.get('X-HMAC-Signature')# 构建签名字符串method = request.methodaccept = request.headers.get('Accept', '')content_type = request.headers.get('Content-Type', '')path = request.pathbody = request.body.decode()expected_signature = generate_hmac_signature(method, accept, content_type, path, body, secret_key)if not hmac.compare_digest(expected_signature, request_signature):return JsonResponse({'error': 'Invalid signature'}, status=403)return self.get_response(request)

步骤 4: 注册中间件

在 Django 的 settings.py 中注册这个中间件。

# settings.pyMIDDLEWARE = [# ...'path.to.HmacAuthenticationMiddleware',# ...
]

2. 前端实现（Vue.js）

步骤 1: 安装 Crypto-js

在 Vue.js 项目中，安装 crypto-js 来生成 HMAC 签名。

npm install crypto-js

步骤 2: 在 Axios 请求中添加签名

在 Vue.js 应用中，创建一个 Axios 请求拦截器，为每个请求添加 HMAC 签名。

// http.js
import axios from 'axios';
import CryptoJS from 'crypto-js';const secretKey = 'your-secret-key';axios.interceptors.request.use(config => {const { method, headers, url, data } = config;const accept = headers['Accept'] || '';const contentType = headers['Content-Type'] || '';const path = url; // 假设 url 是完整路径const body = JSON.stringify(data || {});// 生成签名const msg = `${method.toUpperCase()}${accept}${contentType}${path}${body}`;const signature = CryptoJS.HmacSHA256(msg, secretKey).toString();config.headers['X-HMAC-Signature'] = signature;return config;
}, error => {return Promise.reject(error);
});export default axios;

在 Vue 组件中，使用这个配置的 Axios 实例发送请求。