一种实现前端所有请求添加签名校验的方法

为了防止前端接口数据被恶意篡改以及程序批量请求，在 Request Header 中可以添加公共的签名字段，该字段采用SHA256对请求的参数按照一定规则进行加密，后端服务器接收到请求后，使用加密私钥对该请求的参数进行同样规则加密，若签名字段相同，则代表该请求为有效请求。

以下为在 Nextjs 中添加该实现的一种方式。

要使用 HMAC-SHA256 实现数据签名，可以利用 CryptoJS 提供的 HmacSHA256 方法。这种方式比简单的 SHA256 加密更加安全，因为它结合了私钥与数据进行加密，防止数据篡改。

安装依赖

首先，如果没有安装 crypto-js，你需要安装它：

# For npm
npm install crypto-js

# For yarn
yarn add crypto-js

使用 HMAC-SHA256 生成签名

import CryptoJS from "crypto-js";

// 定义私钥和需要签名的数据
const privateKey = "your-private-key"; // 请将此密钥保存在安全的位置，如环境变量中
const data = "data-to-sign"; // 需要签名的数据

// 使用 HMAC-SHA256 生成签名
const signature = CryptoJS.HmacSHA256(data, privateKey).toString(
  CryptoJS.enc.Hex
);

console.log("HMAC Signature:", signature);

详细步骤

1. 私钥与数据：

   • privateKey 是你的私钥，用于生成签名，这个私钥应该保密，不能泄露。
   • data 是你要进行签名的数据。

2. 使用 CryptoJS.HmacSHA256：

   • CryptoJS.HmacSHA256(data, privateKey) 用来生成基于 HMAC-SHA256 算法的签名。它会将数据和私钥进行安全的混合计算。
   • 生成的签名以二进制数据的形式返回，你可以使用 .toString(CryptoJS.enc.Hex) 将其转换为十六进制字符串，方便传输和存储。

改进：使用环境变量保护私钥

为了避免在代码中暴露私钥，你应该将其保存在环境变量中。下面是如何使用环境变量来加载私钥的示例：

1. 在 .env.local 文件中定义私钥

SECRET_KEY=your-private-key

2. 在代码中使用环境变量

import CryptoJS from "crypto-js";

// 从环境变量中获取私钥
const privateKey = process.env.SECRET_KEY;
const data = "data-to-sign";

// 使用 HMAC-SHA256 生成签名
const signature = CryptoJS.HmacSHA256(data, privateKey).toString(
  CryptoJS.enc.Hex
);

console.log("HMAC Signature:", signature);

如果是在 Nextjs 中使用，我们可以封装公共的 Axios 请求工具，如下：

import axios, { AxiosError } from 'axios';
import CryptoJS from 'crypto-js';

const http = axios.create({
    baseURL: process.env.API_URL
});

// 使用 Nextjs 环境变量的方式，隐藏加密私钥
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY as string;

http.interceptors.request.use((config) => {
  let data = config.params? JSON.stringify(config.params) : JSON.stringify(config.data);
  const signature = CryptoJS.HmacSHA256(data, SECRET_KEY).toString(CryptoJS.enc.Hex);
  config.headers['X-Encrypted-Signature'] = signature;

  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

export {
  http
}

HMAC-SHA256 的优势：

1. 安全性强：相比于简单的 SHA256，HMAC 使用了私钥作为输入，生成的签名不容易被篡改或伪造。
2. 防止重放攻击：通过在签名的数据中引入时间戳或随机数等信息，可以防止攻击者重放旧的请求。

总结

• CryptoJS.HmacSHA256 提供了一种强大且安全的方式来生成基于私钥的签名。
• 私钥安全性：应将私钥存储在环境变量或安全的配置管理系统中，而不要硬编码在代码中。