前台加密,后台解密(3) - Node开发

第一篇文章,我简单介绍了一下我的实际需求,为什么想要加密url中的一个参数值;第二篇文章,我详细讲述了在Node如何实现「前台加密,后台解密」的功能,来满足我这个小需求,同时,还写了一个测试页面测试一下「前台加密,后台解密」的效果。

我相信你读完,应该可以直接上手了,将前台页面加密过的参数传到后台,然后后台进行解密,从而响应对应的请求。可是这个过程有个大坑,假设前台页面有个链接:

1
http://localhost:3000/test?userid=c7ZhfhZXOskDwaQRv+G1Tw==

后台获取参数userid的值理应是c7ZhfhZXOskDwaQRv+G1Tw==,没错吧,可是实际情况并非如此,后台得到的确是c7ZhfhZXOskDwaQRv,那么这样解密出来的结果显然就不对了。为什么会这样,我们来还是先来个示例。

1. 找到问题

还是那个test的页面,我们添加一些内容来测试,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form action="">
<input type="text" placeholder="test" name='test'>
<button type="submit">提交</button>
<p>code(前台加密): <span id="value"></span></p>
<p>code(后台解密): <span id="returnValue"></span></p>
</form>
<br/>
<div>
<p>生成测试URL:</p>
<ul id="testurl">
</ul>
</div>
</body>
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/crypto-js/crypto-js.js"></script>
<script src="/javascripts/crypto-aes.js"></script>
<script>
$(function(){
$('button').click(function(e){
e.preventDefault();
var value = $('input[name=test]').val();
var code = getAes(value);
var $url1 = $('<li><a href="/test/url?userid=' + code + '">/test/url?userid=' + code + '</a></li>');
$url1.appendTo('#testurl');
$('#value').text(code);
$.ajax({
url: '/test',
method: 'POST',
data: {
value: value,
code: code
},
success: function(r){
$('#returnValue').text(r);
}
});
});
})
</script>
</html>

在页面中添加了一些内容,将生成的密文附到链接中,模拟实际访问的效果。如下图:

后台添加一个路由/test/url,然后获取userid的参数值,后台路由代码如下:

1
2
3
4
5
router.get('/url',function(req,res,next){
var userid = req.query.userid;
console.log('+++++++++++++++++++++:' + userid);
res.send('后台得到的参数:' + userid);
});

最后你会发现前台加密后的值,传到后台不一样了,+号变成了空格,为什么会出现这样的情况?

2. 问题原因

3. 解决办法


参考文献: