前后端请求设置签名验证，提升接口安全

Myth丶恋晨 2022-12-29 02:00 212阅读 0赞

## 前端请求设置签名 ##

#### 签名生成 ####

import md5 from 'js-md5';
    export default { 
    	//请求头header配置，data是请求的参数
        getBaseHeaders(data) { 
            let dataSort = this.sortByKey(data);
            let dataStr = this.strJoin(dataSort);
            let urlStr = window.location.origin;
            let timestamp = new Date().getTime();
            let nonceStr = Math.random().toString(36).substr(2);
            //生成前端签名
            let signature = md5(dataStr + '&Timestamp=' + timestamp + '&nonce=' + nonceStr + '&url=' + urlStr);
            let postBaseHeaders = { 
                timestamp: timestamp,
                nonce: nonceStr,
                signature: signature,
            };
            return postBaseHeaders;
        },
        //参数排序
        sortByKey(obj) { 
            const newkey = Object.keys(obj).sort();
            let newObj = { };
            for (let i = 0; i < newkey.length; i++) { 
                newObj[newkey[i]] = obj[newkey[i]];
            }
            return newObj;
        },
        //参数序列化
        strJoin(resData) { 
            let i = 0;
            let str = '';
            let strJoint = '';
            let arr = Object.keys(resData);
            for (let key in resData) { 
                str = key + '=' + resData[key];
                i++;
                if (i < arr.length) { 
                    strJoint = strJoint + str + '&';
                } else if (i == arr.length) { 
                    strJoint = strJoint + str;
                }
            }
            console.log(strJoint);
            return strJoint;
        },
    };

#### axios应用 ####

/* 请求拦截 */
    axios.interceptors.request.use(
        (config: any) => { 
    		let headers = getBaseHeaders({ name: 'test'});
    		config = Object.assign(config, {  headers });	   
    		return config;
        },
        (error: any) => { 
            return Promise.reject(error);
        }
    );

## 后端nodejs校验签名 ##

const Koa = require('koa');
    const bodyParser = require('koa-bodyparser');
    const md5 = require('js-md5');
    
    const app = new Koa();
    app.use(bodyParser());
    
    app.use(async (ctx) => { 
        let url = ctx.headers.origin; //前端地址
        let timestamp = ctx.headers.timestamp; //时间戳
        let nonce = ctx.headers.nonce; //随机字符串
        let signature = ctx.headers.signature; //前端签名
        let postData = ctx.request.body; //参数
    	
    	//参数以key字典顺序(ASCII值大小)升序排序
        let dataSort = sortByKey(postData); 
    
    	//参数序列化拼接
        let dataStr = strJoin(dataSort); 
        
        //md5生成后端签名
        let newSignature = md5(`${ dataStr}&Timestamp=${ timestamp}&nonce=${ nonce}&url=${ url}`); 
    
        //签名校验
        if (signature === newSignature) { 
            ctx.body = { 
                code: 200,
                msg: '签名校验成功',
                data: 'true',
            };
        } else { 
            ctx.body = { 
                code: 4000,
                msg: '签名校验失败',
                data: 'false',
            };
        }
    
        function sortByKey(obj) { 
            const newkey = Object.keys(obj).sort();
            var newObj = { };
            for (var i = 0; i < newkey.length; i++) { 
                newObj[newkey[i]] = obj[newkey[i]];
            }
            return newObj;
        }
    
        function strJoin(resData) { 
            let i = 0;
            let str = '';
            let strJoint = '';
            var arr = Object.keys(resData);
            for (let key in resData) { 
                str = key + '=' + resData[key];
                i++;
                if (i < arr.length) { 
                    strJoint = strJoint + str + '&';
                } else if (i == arr.length) { 
                    strJoint = strJoint + str;
                }
            }
            return strJoint;
        }
    });
    
    const hostName = '127.0.0.1'; //IP
    const port = 80; //端口
    app.listen(port, hostName, () => { 
        console.log(`服务运行在http://${ hostName}:${ port}`);
    });
    
    console.log('成功启动');

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 API接口签名验证

系统从外部获取数据时，通常采用API接口调用的方式来实现。请求方和接口提供方之间的通信过程，有这几个问题需要考虑： 1、请求参数是否被篡改； 2、请求来源是否合法； 3、

太过爱你忘了你带给我的痛/ 2023年01月13日 06:07/ 0 赞/ 147 阅读

相关前后端请求设置签名验证，提升接口安全

前端请求设置签名签名生成 import md5 from 'js-md5'; export default { //请求头header

Myth丶恋晨/ 2022年12月29日 02:00/ 0 赞/ 213 阅读

相关开放api接口签名验证

不要急，源代码分享在最底部，先问大家一个问题，你在写开放的API接口时是如何保证数据的安全性的？先来看看有哪些安全性问题在开放的api接口中，我们通过http Post或者Ge

约定不等于承诺〃/ 2022年07月15日 14:27/ 0 赞/ 231 阅读

相关 API接口签名验证

系统从外部获取数据时，通常采用API接口调用的方式来实现。请求方和接口提供方之间的通信过程，有这几个问题需要考虑： 1、请求参数是否被篡改； 2、请求来源是否合法； 3、

Love The Way You Lie/ 2022年07月13日 00:54/ 0 赞/ 250 阅读

相关开放api接口签名验证

在写开放的API接口时是如何保证数据的安全性的？先来看看有哪些安全性问题在开放的api接口中，我们通过http Post或者Get方式请求服务器的时候，会面临着许多的安全性问题

布满荆棘的人生/ 2022年06月07日 23:35/ 0 赞/ 235 阅读

相关接口安全--http数字签名

web service - rest(representational state transfer)面向资源的接口安全常用手段 [https://blog.csdn.

男娘i/ 2022年05月24日 00:42/ 0 赞/ 196 阅读

相关前后端安全总集

xss 跨站脚本攻击反射型--url带代码存储型--存储到DB，攻击转义 html < 转义&lt >转义&gt "转义"

电玩女神/ 2022年04月03日 15:40/ 0 赞/ 137 阅读

相关 API接口签名生成算法和签名验证算法

1、参考网上资料和书本资料，实现了API接口签名生成算法和签名验证算法。（1）参考资料：[https://www.jianshu.com/p/d47da77b6419]

比眉伴天荒/ 2022年03月30日 09:07/ 0 赞/ 630 阅读

相关接口安全之签名

1. 接口请求采用https的post方式，返回信息全部采用json格式报文。 2. 请求和返回报文双方约定采用UTF-8编码，并对请求参数做URLEncoder。

淡淡的烟草味﹌/ 2022年03月15日 09:40/ 0 赞/ 278 阅读

相关前后端 JWT 验证

什么是JWT Json web token（JWT）是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准（RFC 7519），该token被设计为紧凑且安全的，特

浅浅的花香味﹌/ 2022年02月05日 10:37/ 0 赞/ 206 阅读