Technical Analysis and Practice of Manually Setting Referer Header in JavaScript

The Nature of Referer Header and Browser Security Restrictions

In web development, Referer is a crucial field in HTTP request headers that indicates the source page of the current request. However, from a security perspective, modern browsers strictly limit JavaScript's direct modification permissions for HTTP headers. This design aims to prevent malicious scripts from forging request sources, thereby protecting user privacy and website security.

Impossibility of Directly Setting Referer Header

Based on technical practice verification, it is impossible to directly modify the HTTP Referer header in JavaScript. The security mechanisms of browser kernels prevent any attempts to directly manipulate request headers through scripts. Even when using XMLHttpRequest or fetch API to set custom headers, the Referer field remains specially protected and cannot be overwritten.

Indirectly Influencing Referer Through Page Navigation

Although the Referer header cannot be set directly, it can be indirectly influenced through page navigation using location.href. When users trigger page navigation via JavaScript, the browser automatically uses the current page's URL as the Referer value for the next request. For example:

// Navigation via location.href, current page URL becomes Referer for next request
location.href = "https://example.com/target-page";

It is important to note that this method causes page reloading, which may not be suitable for all scenarios. In practical applications, developers need to balance user experience with functional requirements.

Browser Compatibility and Alternative Solution Analysis

Some developers attempt to override the document.referrer property using Object.defineProperty:

Object.defineProperty(document, "referrer", {
    get: function() { return "custom-referrer"; }
});

However, this method has significant compatibility issues. In older browser versions such as Safari <=5, Firefox <4, Chrome <5, and Internet Explorer <9, defineProperty cannot be used on DOM objects. Even in newer browser versions, such modifications are limited to the current page's JavaScript environment and do not affect the actual HTTP request headers.

Limitations of __defineGetter__ Method

Another attempt involves using the __defineGetter__ method:

delete window.document.referrer;
window.document.__defineGetter__('referrer', function() {
    return "custom-url.com";
});

This method might work in Chrome and Firefox but fails in Safari. More importantly, such modifications only affect the reading of the document.referrer property within the JavaScript environment and do not change the actual Referer header in HTTP requests.

Practical Application Suggestions and Best Practices

For scenarios requiring control over reference sources, consider the following alternatives:

• Pass source information via URL parameters on the server side
• Use PostMessage API for inter-page communication
• Utilize Session Storage or Local Storage to store source data
• Pass reference information through intermediate pages during redirects

Although these methods cannot directly modify the Referer header, they can achieve similar functional requirements while maintaining better browser compatibility and security.

Security Considerations and Future Development

Browser protection of the Referer header is a vital component of web security architecture. With increasing awareness of privacy protection, major browser vendors may further strengthen control over the Referer header. Developers should adhere to web standards, avoid relying on potentially restricted features, and ensure long-term maintainability of applications.