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


概要

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


1. Django 后端实现

步骤 1: 安装所需库

在 Django 项目中,我们首先确保安装了 hmachashlib,这些通常是 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 实例发送请求。

3. 安全考虑

  • 密钥保密:确保前后端使用相同的密钥,并且密钥在前端不被暴露。最好的做法是将密钥保存在环境变量中。

  • 防止重放攻击:可以在签名中包含一个时间戳和/或一个随机数,并在服务端验证这个时间戳的有效性。

4. 测试和调试

  • 测试确保前后端签名生成一致。

  • 使用 Postman 或类似工具测试 API 请求,确保中间件正确校验签名。

总结

通过在 Django 后端实现 HMAC 签名校验的中间件,并在 Vue.js 前端生成相应的签名,可以大大增强应用的安全性。这种机制确保了数据在传输过程中的完整性和身份的验证。正确实施这些措施需要确保前后端的协调一致,并妥善处理安全相关的细节。

相关推荐
运维开发王义杰2 小时前
金融安全生命线:用AWS EventBridge和CloudTrail构建主动式入侵检测系统
安全·金融·aws
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
加密狗复制模拟6 小时前
坚石ET ARM加密狗复制模拟介绍
安全·软件工程·个人开发
小石潭记丶6 小时前
Django服务开发镜像构建
django·sqlite·pip
盛夏绽放6 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
galaxylove7 小时前
Gartner发布塑造安全运营未来的关键 AI 自动化趋势
人工智能·安全·自动化
scuter_yu7 小时前
主流零信任安全产品深度介绍
运维·网络·安全