URL重定向，referer，referrer和安全

URL重定向,referer，referrer和安全

重定向是我们在前端中常用的技术，他的使用和安全也是很重要的，
今天在使用express的时候仔细研究了下这里面的东西，写下来做个记录。

referer和referrer

如果使用过这个参数的时候，我们会发现有时候是referer，而又的时候是referrer，这到底是怎么回事呢。
这就要谈到前端的发展，前端发展史中有很多有意思的东西，比如link，这里的referer也是一个历史遗留问题，http中里面有用来表示页面或者资源请求头，是在上世纪九十年代提出来的，但是当时将这个命名为referer，并写入http协议的里面，正确的写法实际上是referrer。由于在http协议中标准错误了，错误大家就讲错就错，浏览器和服务端使用这个错误的referer，但是意思都是一个样的。
但是在javascript中呢，大家就比较协心，统一的使用referrer，我们可以使用document.referrer来获取referrer来找到源地址。
最新的fetch（新的异步请求方法）中也有referrer这个参数，有兴趣大家可以看看。

弄清楚了referer和referrer我们来看看他们的使用。今天在测试重定向的时候，先用nodejs在后端进行referer获取，用

router.get('/test',function(req,res,next){
    var Url = req.originalUrl;
    var refe = req.headers[referer];

req.originalUrl获取的是当前的url地址。没有问题，但是req.headers[referer]就没有结果，console.log出现的是undefined，讲referer改为了referrer也是同样的问题。
点开express查看源代码

 */
req.get =
req.header = function header(name) {
  var lc = name.toLowerCase();

  switch (lc) {
    case 'referer':
    case 'referrer':
      return this.headers.referrer
        || this.headers.referer;
    default:
      return this.headers[lc];
  }
};

显示其中有这个方法，而且能同时识别referer和referrer，但是undefined是，那我们就输出headers。

router.get('/test',function(req,res,next){
    var Url = req.originalUrl;
    var refe = req.headers;
    res.writeHead(200,{
        "Content-Type": "text/html;charset=utf-8"
    });
    // console.log(Url);
    // //res.end(req.host);
    // //console.log(req.headers.host);
    // console.log(refe);
    //req.end(req.headers.host);
    res.end(JSON.stringify(refe));

出现的结果是

{"host":"localhost:3000","connection":"keep-alive","upgrade-insecure-requests":"1","user-agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8","accept-encoding":"gzip, deflate, sdch","accept-language":"zh-CN,zh;q=0.8"}

原因是我的重定向的没有这个参数。

再查查看，会发现。这个referer的支持是不统一的，referer这个参数是浏览器自动添加给header中的，并且通过浏览器自动传递到 下去，不管是几重定向，找到都是最终的源地址。

重新部署一个服务器，写两个html网页，用a来进行重定向，我们得到的结果是。

{"host":"localhost:3000","connection":"keep-alive","upgrade-insecure-requests":"1","user-agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8","referer":"http://localhost/test/1.html","accept-encoding":"gzip, deflate, sdch","accept-language":"zh-CN,zh;q=0.8"}

现在便有了referer标签。

能获取到referer的情况：
1. 使用A标签来访问页面
2. submit input提交的表单post和get
3. 使用js提交的post和get表单

不能获取的referer的情况：
1. 使用js重定向 location.href 和 location.replace()
2. 服务器端的redirect，PHP中的header(“location:”)
3. 使用http重定向（我开始做的就是http重定向的项目，所以得不到referer参数）

重定向的安全使用

重定向是经常使用的一个东西，但是他也会带来一些安全问题。
首先在web安全中有个我们熟知的跨站请求伪造攻击，我们使用referer的话就能进行一定的防御。

更多的可以了解cps，isp，dns劫持。http重定向