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 hashlib

def 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 JsonResponse

class HmacAuthenticationMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        secret_key = 'your-secret-key'
        request_signature = request.headers.get('X-HMAC-Signature')

        # 构建签名字符串
        method = request.method
        accept = request.headers.get('Accept', '')
        content_type = request.headers.get('Content-Type', '')
        path = request.path
        body = 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.py

MIDDLEWARE = [
    # ...
    '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 实例发送请求。