Introduction
in JavaScript, document object has many attributes, including three requests for web pages and related properties, they are URL, domain and referrer.
URL attribute contains the full page URL, domain attribute contains only the domain name of the page, and then save the referrer property link to that page of the current page URL.
The first two are well understood, and referrer attribute is simply on a page URL. Well, this particular property What use is it?
In H5 page, we often want to add a button to return to the previous page in the head, such as the following:
Click on the left of the elements can return to the previous page, we can write a simple JS code:
var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){ history.back(); //返回上一个页面，也可以写成history.go(-1) }; // 或者 <a id="back" href="javascript:history.back();" rel="external nofollow" ></a> Huh? It says so much, or did not say what document.referrer with it! Do not worry, just in front of foreshadowing, then come to the question ~~~
Although this feeling above has basically realized the Back function, but there is a case not taken into account (we still have a little strict programmers thing), that is If the page is to share with others over rather than through other pages to enter it? Then click on the button will not have any reaction, because history does not exist at this time in history an object, that is to say this is the view of the browser window when you open the first page.
In order to optimize the user experience, there are usually two solutions. One is not displayed Back button when you open the first page, and the other is to click on to jump directly to the website home page, which can choose the right program for production requirements.
It is assumed that choose the first option, we can write segment JS:
if(document.referrer){
back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}
//分享页 返回上一页 if (typeof document.referrer === '') { // 没有来源页面信息的时候，改成首页URL地址 $('.jsBack').attr('href', '/'); } In fact, to determine whether the current page is a user starts to open the page, the method also by more than a way to determine the referrer attribute this also can be judged by history.length is zero.
Browser Support for:
关于HTTPS请求
如果在一张普通的HTTP页面上点击了HTTPS的链接，那么在https请求头部可以附上Referer信息，之后在HTTPS页面中依然可以用document.referre来获得普通的http页面。
同样，如果是在一张https页面上点击了另一个HTTPS的链接，可以在请求的头部附上Referer信息。
但是如果是从一张https页面点击了http链接，那么很不幸，发送的http请求头里无法包含关于https页面的信息，这可能是出于一种对https页面的保护措施。
伪造Referer信息
根据上文的描述，document.referre源自于Header中的Referer。那么如果想修改document.referre的值，理论上讲，仅需要修改请求Header。可以将Header中现有的Referer替换成自己想要的值，如果原来没有也可以添加Referer。
在客户端，篡改Header是一件非常容易的事情。在一个页面的http请求发出去之前，可以利用截包工具将其拦截，然后分析出头部信息，并且修改Referre。
搜了一下，对于FireFox可以使用RefControl插件方便的进行修改。总之，欺骗Traffic source是轻而易举的事情。
页面强制Refresh
<meta http-equiv="Refresh" content="5;URL=a.html"> 则过5秒后浏览器会自动向server发起a页面请求。
经过测试，在IE8，FF3.6-FF4.0中，均不会带有Referer信息，但是chrome却能够鬼使神差的把b.html作为Referer添加进头部。
几种意外丢失情况：
1，直接在浏览器中输入地址
2，使用location.reload()刷新（location.href或者location.replace()刷新有信息）
3，在微信对话框中，点击进入微信自身浏览器,
4，扫码进入微信或QQ的浏览器
5，直接新窗口打开一个页面
6，从https的网站直接进入一个http协议的网站（Chrome下亲测）,
7.a标签设置rel="noreferrer"（兼容IE7+）
8，meta标签来控制不让浏览器发送referer
9，点击 flash 内部链接
10，Chrome4.0以下，IE 5.5+以下返回空的字符串,使用 修改 Location 进行页面导航的方法，会导致在IE下丢失 referrer，这可能是IE的一个BUG
11，跨域
12，iframe隐藏
结论：如果你需要通过 document.referrer 采集页面访问来源，最好不要使用 JS 跳转或打开新窗口，也不要使用 meta 跳转。
referrer 的作用：
1，统计来源，可以统计数量，可以拒绝访问
2，返回上一页逻辑判断