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

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

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

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

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

1. 找到问题

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

<!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的参数值,后台路由代码如下:

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

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

2. 问题原因

3. 解决办法


参考文献:


Comments
Write a Comment