接口参数签名校验，是WebApi接口服务最重要的安全防护手段之一. 结合项目中实际使用情况，介绍下前后端参数签名校验实现方案。

签名校验规则

http请求，有两种传参形式:

1.通过url传参，最常见的就是get请求(实际上post,put,delete都可以使用这种传参方式)，如:

http://api.XXX.com/getproduct?id=value1

2.通过request body传参，最常见的就是post请求，如下图所示
webapi参数签名-01
我们针对于以上两种传参方式，采用不同的签名校验规则(注:签名算法规则仅供参考)。WebApi是不支持通过url和body同时传参数的,所以在服务端可以通过HttpContext.Current.Request.QueryString 获取到form参数进行判断,执行不同逻辑，如下代码所示:

var form = HttpContext.Current.Request.QueryString; // 请求的url参数 var data = string.Empty; if (form.Count > 0) { //第一步：取出所有form参数 IDictionary<string, string> parameters = new Dictionary<string, string>(); for (var f = 0; f < form.Count; f++) { var key = form.Keys[f]; parameters.Add(key, form[key]); } // 第二步：把字典按Key的字母顺序排序 IDictionary<string, string> sortedParams = new SortedDictionary<string, string>(parameters); var dem = sortedParams.GetEnumerator(); // 第三步：把所有参数名和参数值串在一起 var query = new StringBuilder(); while (dem.MoveNext()) { var key = dem.Current.Key; var value = dem.Current.Value; if (!string.IsNullOrEmpty(key)) query.Append(key).Append(value); } data = query.ToString(); } else { //请求输入的内容，即body内容 var stream = HttpContext.Current.Request.InputStream; stream.Position = 0; var responseJson = string.Empty; var streamReader = new StreamReader(stream); data = streamReader.ReadToEnd(); stream.Position = 0; }

通过上述逻辑之后，data变量中存储的就是接口参数内容。以下是实际签名校验逻辑

/// <summary> /// 签名校验 /// </summary> /// <param name="timeStamp">时间戳(按秒)</param> /// <param name="data">参数内容</param> /// <param name="signature">前端签名值</param> /// <returns></returns> public bool Validate(string timeStamp, string data, string signature) { var hash = MD5.Create(); //拼接签名数据 var signStr = timeStamp + data; //将字符串中字符按升序排序 var sortStr = string.Concat(signStr.OrderBy(c => c)); var bytes = Encoding.UTF8.GetBytes(sortStr); //使用32位大写 MD5签名 var md5Val = hash.ComputeHash(bytes); var result = new StringBuilder(); foreach (var c in md5Val) result.Append(c.ToString("X2")); var s = result.ToString().ToUpper(); //与前端传过来的签名参数进行比对 return s == signature; }

Action拦截器实现对某些Api进行签名校验

创建WebApi的Action拦截器HandlerSecretAttribute

/// <summary> /// 签名安全拦截过滤器 /// </summary> public class HandlerSecretAttribute : ActionFilterAttribute { private readonly ExcuteMode _customMode; /// <summary>默认构造</summary> /// <param name="Mode">认证模式</param> public HandlerSecretAttribute(ExcuteMode Mode) { _customMode = Mode; } /// <summary> /// 安全校验 /// </summary> /// <param name="filterContext"></param> public override void OnActionExecuting(HttpActionContext filterContext) { //是否忽略权限验证 if (_customMode == ExcuteMode.Ignore) return; //从http请求的头里面获取AppId var request = filterContext.Request; var method = request.Method.Method; var appId = ""; //客户端应用唯一标识 long timeStamp; //时间戳， 校验10分钟内有效 var signature = ""; //参数签名，去除空参数,按字母倒序排序进行Md5签名 为了提高传参过程中，防止参数被恶意修改，在请求接口的时候加上sign可以有效防止参数被篡改 try { appId = request.Headers.GetValues("appId").SingleOrDefault(); timeStamp = Convert.ToInt64(request.Headers.GetValues("timeStamp").SingleOrDefault()); signature = request.Headers.GetValues("signature").SingleOrDefault(); } catch (Exception ex) { throw new UserFriendlyException("签名参数异常:" + ex.Message); } #region 安全校验 //TODO:实际逻辑处理 base.OnActionExecuting(filterContext); #endregion } }

具体的使用，如下图所示:

如果是需要全局注册,请在WebApi.config中配置，如下图所示:

有关HandlerSecretAttribute的源代码，我已整理放至github上https://github.com/yinboxie/BlogExampleDemo

前端Axios请求统一拦截处理

客户端http请求(以Axios为例)进行统一的拦截处理。前端用过诸多http插件,如ajax,fetch,vue-resoure,axios等，个人感觉axios的请求拦截是最好用的。

import axios from 'axios' import { sign } from './sign' let _ = require('lodash') var service = axios.create({ baseURL:'http://xxx.com' timeout:10000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use( config => { let token = getToken() if (token) { config.headers['token'] = token // 让每个请求携带自定义token 请根据实际情况自行修改 } // 如果接口需要签名, 则通过请求时,headers中传递sign参数true if (config.headers['sign']) { config = sign(config) // 核心签名逻辑，独立封装了处理函数 } return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) } )

sign函数核心源码

import md5 from 'js-md5' let _ = require('lodash') /** * 接口参数签名 * @param {*} config 请求配置 */ export const sign = config => { // 获取到秒级的时间戳,与后端对应 let tmp = new Date() .getTime() .toString() .substr(0, 10) let header = { appId:'pmes', timeStamp: tmp, signature: '' } let signStr = _.toString(header.timeStamp) if (config.params) { // url参数签名 let pArray = [] for (let p in config.params) { pArray.push(p) } let sArray = pArray.sort() for (let item of sArray) { signStr += item + _.toString(config.params[item]) } } else if (config.data) { // request body参数的内容 signStr += JSON.stringify(config.data) } // 签名核心逻辑 let newsignStr = _.sortBy(signStr, s => s.charCodeAt(0)).join('') let s = md5(newsignStr).toUpperCase() header.signature = s config = Object.assign(config, { headers: header }) return config }

实际的调用函数

// post请求， body传参 axios.post('/Login/CheckLoginTest1', { Account: 'xiaowang',Password: '123' }, { headers: { sign: true }} ).then(d => { console.log(d) }) // post请求，url传参 axios.post('/Login/CheckLoginTest3', null, { params: {t1: '2',t2: '3'}, headers: { sign: true } } ).then(d => { console.log(d) }) // get请求 axios.get('/Login/CheckLoginTest2', { params: {t1: '2',t2: '3'}, headers: { sign: true } } ).then(d => { console.log(d) })