前后分离的系统中，参数传递的重要性不言而喻，特别是一些重要的参数，如支付金额等，如何保证前端的参数不被篡改，就要实现对参数的签名加密。
实现思路
前端在发送请求时，得到所有参数并排序，然后使用MD5摘要得到签名字符串，后端在拿到参数后，一样需要排序并签名，然后对比前后的签名字符串是否相同，不同则参数可能被篡改，对于安全性更高的，可以做 加盐+加密 处理。
调用过程
image.png
前端实现逻辑
加密工具
import md5 from 'js-md5'
export default class signMd5Utils {
/**
* json参数升序
* @param jsonObj 发送参数
*/
static sortAsc(jsonObj) {
let arr = new Array();
let num = 0;
for (let i in jsonObj) {
arr[num] = i;
num++;
}
let sortArr = arr.sort();
let sortObj = {};
for (let i in sortArr) {
sortObj[sortArr[i]] = jsonObj[sortArr[i]];
}
return sortObj;
}
/**
* @param url 请求的url,应该包含请求参数(url的?后面的参数)
* @param requestParams 请求参数(POST的JSON参数)
* @returns {string} 获取签名
*/
static getSign(url, requestParams) {
let urlParams = this.parseQueryString(url);
let jsonObj = this.mergeObject(urlParams, requestParams);
let requestBody = this.sortAsc(jsonObj);
return md5(JSON.stringify(requestBody)).toUpperCase();
}
/**
* @param url 请求的url
* @returns {{}} 将url中请求参数组装成json对象(url的?后面的参数)
*/
static parseQueryString(url) {
let urlReg = /^[^\?]+\?([\w\W]+)$/,
paramReg = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
urlArray = urlReg.exec(url),
result = {};
if (urlArray && urlArray[1]) {
let paramString = urlArray[1], paramResult;
while ((paramResult = paramReg.exec(paramString)) != null) {
result[paramResult[1]] = paramResult[2];
}
}
return result;
}
/**
* @returns {*} 将两个对象合并成一个
*/
static mergeObject(objectOne, objectTwo) {
if (Object.keys(objectTwo).length > 0) {
for (let key in objectTwo) {
if (objectTwo.hasOwnProperty(key) === true) {
objectOne[key] = objectTwo[key];
}
}
}
return objectOne;
}
static urlEncode(param, key, encode) {
if (param == null) return '';
let paramStr = '';
let t = typeof (param);
if (t == 'string' || t == 'number' || t == 'boolean') {
paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
} else {
for (let i in param) {
let k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
paramStr += this.urlEncode(param[i], k, encode);
}
}
return paramStr;
};
}
发送请求
import axios from 'axios';
import signMd5Utils from "../utils/signMd5Utils"
// var config = require('../../config')
//config = process.env.NODE_ENV === 'development' ? config.dev : config.build
//let apiUrl = config.apiUrl;
//var qs = require('qs');
const instance = axios.create({
baseURL: 'http://localhost:8080/',
// timeout: 1000 * 30,
// 允许跨域带token
xhrFields: {
withCredentials: false
},
crossDomain: true,
emulateJSON: true
});
export default instance
export function signTestPost(query) {
let url = 'signTest';
let sign = signMd5Utils.getSign(url, query);
let requestUrl = url + "?sign=" + sign; //将签名添加在请求参数后面去请求接口
return instance({
url: requestUrl,
method: 'post',
data: query
})
}
export function signTestGet(query) {
let url = 'signTest';
let urlParams = signMd5Utils.urlEncode(query);
let sign = signMd5Utils.getSign(url, query);
let requestUrl = url + "?sign=" + sign + urlParams; //将签名添加在请求参数后面去请求接口
return instance({
url: requestUrl,
method: 'get',
})
}
调用请求
let user = {
"username": "admin",
"password": "admin",
};
signTestPost(user).then(r => {
console.log(r)
});
signTestGet(user).then(r => {
console.log(r)
})
后端代码
用过滤器验证签名
import com.alibaba.fastjson.JSONObject;
import com.show.sign.utils.HttpUtils;
import com.show.sign.utils.SignUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.SortedMap;
/**
* 签名过滤器
* @author show
* @date 10:03 2019/5/30
* @Component 注册 Filter 组件
*/
@Slf4j
@Component
public class SignAuthFilter implements Filter {
static final String FAVICON = "/favicon.ico";
@Override
public void init(FilterConfig filterConfig) {
log.info("初始化 SignAuthFilter");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
// 防止流读取一次后就没有了, 所以需要将流继续写出去
HttpServletRequest request = (HttpServletRequest) req;
HttpServletRequest requestWrapper = new BodyReaderHttpServletRequestWrapper(request);
//获取图标不需要验证签名
if (FAVICON.equals(requestWrapper.getRequestURI())) {
chain.doFilter(request, response);
} else {
//获取全部参数(包括URL和body上的)
SortedMap<String, String> allParams = HttpUtils.getAllParams(requestWrapper);
//对参数进行签名验证
boolean isSigned = SignUtil.verifySign(allParams);
if (isSigned) {
log.info("签名通过");
chain.doFilter(requestWrapper, response);
} else {
log.info("参数校验出错");
//校验失败返回前端
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
PrintWriter out = response.getWriter();
JSONObject resParam = new JSONObject();
resParam.put("msg", "参数校验出错");
resParam.put("success", "false");
out.append(resParam.toJSONString());
}
}
}
@Override
public void destroy() {
log.info("销毁 SignAuthFilter");
}
}
BodyReaderHttpServletRequestWrapper 类 主要作用是复制 HttpServletRequest 的输入流，把签名参数过滤，不过不过滤也没有关系。
import javax.servlet.ReadListener;
import javax.servlet.ServletInputStream;
import javax.servlet.ServletRequest;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import java.io.*;
import java.nio.charset.Charset;
/**
* 保存过滤器里面的流
* @author show
* @date 10:03 2019/5/30
*/
public class BodyReaderHttpServletRequestWrapper extends HttpServletRequestWrapper {
private final byte[] body;
public BodyReaderHttpServletRequestWrapper(HttpServletRequest request) {
super(request);
String sessionStream = getBodyString(request);
body = sessionStream.getBytes(Charset.forName("UTF-8"));
}
/**
* 获取请求Body
*/
public String getBodyString(final ServletRequest request) {
StringBuilder sb = new StringBuilder();
try (
InputStream inputStream = cloneInputStream(request.getInputStream());
BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream, Charset.forName("UTF-8")))
) {
String line;
while ((line = reader.readLine()) != null) {
sb.append(line);
}
} catch (IOException e) {
e.printStackTrace();
}
return sb.toString();
}
/**
* Description: 复制输入流</br>
*/
public InputStream cloneInputStream(ServletInputStream inputStream) {
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
byte[] buffer = new byte[1024];
int len;
try {
while ((len = inputStream.read(buffer)) > -1) {
byteArrayOutputStream.write(buffer, 0, len);
}
byteArrayOutputStream.flush();
} catch (IOException e) {
e.printStackTrace();
}
return new ByteArrayInputStream(byteArrayOutputStream.toByteArray());
}
@Override
public BufferedReader getReader() {
return new BufferedReader(new InputStreamReader(getInputStream()));
}
@Override
public ServletInputStream getInputStream() {
final ByteArrayInputStream bais = new ByteArrayInputStream(body);
return new ServletInputStream() {
@Override
public int read() {
return bais.read();
}
@Override
public boolean isFinished() {
return false;
}
@Override
public boolean isReady() {
return false;
}
};
}
}
至此实现参数签名验证过程，对于一些敏感数据尽量使用参数签名+加密。
网友评论