Home >Web Front-end >JS Tutorial >Detailed analysis of javascript operation referer_javascript skills

Detailed analysis of javascript operation referer_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:56:211691browse

Importance of Referrer
There is a referer header in the HTTP request, which is used to indicate the source reference page of the current traffic. For example, if you click a link on www.sina.com.cn/sports/ to reach the homepage of cctv.com, then the referrer will be www.sina.com.cn/sports/. In Javascript, we can get the same information through document.referrer. Through this information, we can know the channel from which visitors came to the current page. This is very important for Web Analytics. It can tell us the distribution of traffic brought by different channels, as well as the keywords searched by users, etc., which are all obtained by analyzing this referrer information.

However, for various reasons, sometimes the referrer read in Javascript is an empty string. The following summarizes the situations in which referrers will be lost.

Modify the Location object for page navigation
The Location object is a very practical object for page navigation. Because it allows you to change only part of the Url. For example, when switching from a cn domain name to a com domain name, the other parts remain unchanged:

Copy the code The code is as follows:

window.location.hostname = "example.com";

However, the method of page navigation by modifying the Location will cause the Referrer to be lost under IE.

An empty string is returned under IE5.5

Chrome3.0, Firefox3.5, Opera9.6, and Safari3.2.2 all return to the source webpage normally

Open a new window with window.open method
Example:

Copy code The code is as follows:

Clicking this link will open the Google website in a new window. We can see the referrer sent by entering the following js code in the address bar.
Copy code The code is as follows:

javascript:alert(document.referrer)

Test results:

An empty string is returned under IE5.5

Chrome3.0, Firefox3.5, Opera9.6, and Safari3.2.2 all return to the source webpage normally

If the same domain name is redirected through this method, then we can obtain the lost referrer information by accessing the windoww.opener object. The code is as follows:

Copy code The code is as follows:




If it’s cross-domain, there’s no way~

Mouse drag to open a new window
Mouse drag is a very popular user habit nowadays. Many browsers have built-in or plug-in support for mouse drag browsing. However, pages opened in this way basically lose referrers. Moreover, in this case, it is impossible to use window.opener to obtain the lost referrer.

Tested:

Maxthon2.5.2, FireGesture plug-in for Firefox, Chrome3.0, Opera9.6, Safari3.2.

Click on the Flash internal link
When you click on Flash to reach another website, the Referrer situation becomes more complicated.

Under IE, the value read through document.referrer of client Javascript is empty, but if you use traffic monitoring software to take a look, you will find that the Referer header in the HTTP request is actually Valuable, this may be a bug implemented by IE. At the same time, this value points to the address of the Flash file, not the address of the source web page.

After clicking Flash to reach a new window under Chrome 4.0, the Referrer also points to the address of the Flash file, not the address of the source web page.

Chrome 3.0 and Safari 3.2 are the same, both will lose the Referrer information.

Opera is the same as Firefox, the value of Referrer is the address of the source web page.

HTTPS to HTTP
When jumping from an HTTPS website to an HTTP website, the browser will not send a referrer. The behavior of all major browsers is the same.

For example, when we use Google Reader or Gmail under HTTPS and click a link to go to another website, then technically speaking, there is no difference between such access and the user directly typing in the URL.

The impact of the loss of Referrer on advertising traffic monitoring
If the Referrer is lost, Web Analytics will lose a very important part of the information, especially for advertising traffic, it will be impossible to know the actual source. At present, many domestic websites that use Google Adsense ads use the window.open method to open advertising links, so the Referrer will be lost under IE, and we know that IE is the browser with the largest market share at present, so its impact is huge. Big ones. Many traffic statistics tools will therefore classify this part of the traffic as "direct traffic", which is equivalent to the user directly typing in the URL.

For such a situation, advertisers need to add specific tracking parameters to the URL of the landing page when placing ads.

For example, if you click on a Flash ad, the URL it reaches is http://www.example.com/. In order to monitor which channel this traffic comes from, we can modify the landing URL of this ad to http. ://www.example.com/?src=sina, similar to this method, and then use Javascript code to extract this src parameter in the landing page, so that the advertising source information can be obtained.

When running Google Adwords, the background system has an "auto-tagging" option. When this option is enabled, Google will automatically add a gclid parameter when generating the landing page URL of all ads. This parameter can integrate data from the Google Analytics backend and the Adwords advertising backend. In this way, you can know which advertising campaign the advertising traffic corresponds to, which advertising source and advertising keywords and other information. The idea is actually similar to the one mentioned above. It’s just that Google automatically modified the URL for you.

Solution to the empty referer under IE
If you use the window.location.href method to jump under IE, the referer value will be empty. If you jump within the tag, the referer will not be empty. Therefore, this IE problem can be solved by using the following code

Copy code The code is as follows:

function gotoUrl(url){
if(window.VBArray){
var gotoLink = document.createElement('a');
gotoLink .href = url;
document.body.appendChild(gotoLink) ;
             gotoLink .click();                                              ;
Prohibit browsers from using referer when accessing links
When we click on a link from a website to enter another page, the browser will add the Referer value to the header to identify this time The source page visited. However, this kind of identification may leak the user's privacy. Sometimes I don't want others to know where I clicked in. Is there any way to prevent the browser from sending a Referer?

•Use the new html5 solution, use rel="noreferrer", declare the connection attribute as noreferrer, currently only supported by chrome4.
•Use an intermediate page, but actually still send the referrer, such as using Google's connection redirection, noreferrer.js.
•Use javascript protocol link transfer, see the instructions below.

Open a new window, equivalent to target="_blank":

Copy the code The code is as follows:

function open_window(link){
var arg = 'u003cscriptu003elocation.replace("' link '")u003c/scriptu003e';
window.open('javascript:window.name;', arg) ;
}


redirects to a connection, equivalent to target="_self":
Copy the code The code is as follows:

function redirect(link){
var arg ='u003cscriptu003etop.location.replace("' link '")u003c/ scriptu003e';
var iframe = document.createElement('iframe');
iframe.src='javascript:window.name;';
iframe.name=arg;
document.body. appendChild(iframe);
}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn