HTML跳转-从获取 Referrer 的方法说起

本文探讨了网页跳转的不同实现方法,包括HTML链接、HTTP重定向、meta标签及JavaScript等,并讨论了不同方法对referrer的影响及如何确保跨浏览器一致地发送referrer。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

要使页面在当前页跳转到下一页,有几种实现方式:

  1. HTML: 点击标准的链接

    <a href="new/path">goto</a>

  2. HTTP header: 服务端跳转(301或302重定向)

    Location: http://host/new/path

  3. HTML: 使用 meta 配置

    <meta http-equiv="refresh" content="1; url=new/path />"

  4. JavaScript: 改变 location.href 属性

    location.href = 'new/path';

  5. JavaScript: 使用 location.replace() 方法

    location.replace('new/path');

以上方法实现方式不同,可以灵活运用于不同场景。悲剧的是,虽然可以达成跳转需求,但通过一些方式跳转到新页面时不会带上引用页地址 (referrer, HTTP header 错误地把它拼写成 “referer”). 为什么需要引用页?因为:

  • 站长和产品经理们要了解用户使用自己网站的习惯,从而发现使用流程中的问题

  • 有时候服务端需要验证来源,确保点击来自指定的地址

上面说“一些方式”而没有具体指明到底是哪些,是因为实践发现,不同的浏览器甚至不同版本,在处理这些方式时,采取不同的引用页发送策略。这里有人做了很好的总结:


(image via)

表格中的浏览器比较老,不过你可以通过它提供的测试页面 验证各种方式在新浏览器中是否会发送引用。

那么有没有靠谱的方法,确保各种浏览器必然会发送引用页呢?答案是肯定的,相对繁琐一点而已。大概实现方式是这样的:

  1. 手动创建一个 <a> 标签,设置其地址为要跳转的目标地址

  2. 隐藏这个链接标签

  3. 手动调用其 click() 方法,模拟用户点击

stackoverflow 上面有人贴了代码

似乎到这里就可以结束了。不过我想探讨的是,为什么会有这些差异?

在我看来,发送引用页是浏览器负责的事情,每个浏览器及其不同版本,对是否要发送引用可能持有不同的看法,无所谓规范或标准。比如,多 tab 浏览器大多支持滚轮点击链接开新 tab, 你说这种情况下要不要发送引用呢?你可能会说:“要发送”,事实上大多数国产浏览器都不会发,而 IE 会。

另一方面,因为引用页数据是直接跟隐私相关的,所以会导致有不同的理解。比如那个 location.replace() 如果我是浏览器的 PD, 会要求不发。因为按照我的理解,这个方法的功能是,抹掉历史记录中的当前页;本地都抹掉了,从隐私保护上来说,我不希望下一个页面知道来源。


转自http://janlay.com/blog/2012/ideas-about-grabbing-referrer/

<think>我们正在处理一个与HTTP Referer相关的技术问题。用户希望从A页面跳转到B页面时,B页面能够接收到特定的Referrer信息。但是,根据HTTP规范,Referer请求头是由浏览器自动设置的,表示当前请求页面的来源页面的地址。这个值通常不能被JavaScript直接修改,因为这会来安全风险(例如,可能被用来进行CSRF攻击或误导服务器)。 然而,有一些变通方法可以实现类似的效果。请注意,这些方法可能受到浏览器安全策略的限制,并且可能随着浏览器更新而变化。 方法1:使用meta标签控制referrerHTML A页面的头部,我们可以使用meta标签来设置整个页面的referrer策略。例如,我们可以设置referrer为特定的值,但请注意,这个策略控制的是从该页面发出的所有请求的referrer信息,而不是单个链接。 但需要说明的是:meta标签的referrer策略只能设置策略(如no-referrer, no-referrer-when-downgrade, origin等),不能直接设置一个任意的referrer值。 方法2:通过中间页面跳转(利用iframe或window.location) 我们可以创建一个中间页面,在这个中间页面中通过JavaScript进行跳转,并利用一些技巧来修改referrer。但是,由于安全限制,直接修改referrer是不可能的,但我们可以通过不发送referrer的方式,然后在跳转时通过其他方式传递来源信息(比如在URL中添加参数)。 然而,用户要求设置特定的Referrer值,这几乎是不可能的,因为浏览器不允许伪造Referrer。但是,我们可以通过以下思路来传递来源信息: 在A页面跳转到B页面时,不在HTTP Referer头中传递,而是通过URL参数传递。然后在B页面中,我们可以通过解析URL参数来获取这个“特定链接”,并把它当作Referrer来使用(尽管不是真正的HTTP Referer头)。 步骤: 1. 在A页面,我们构造一个跳转链接,将我们想要传递的“特定链接”作为参数附加到B页面的URL上。 例如:`window.location.href = 'https://B.com?custom_referrer=' + encodeURIComponent('https://desired-referrer.com');` 2. 在B页面,我们可以通过解析URL参数来获取custom_referrer的值,然后将其作为我们业务逻辑中的“referrer”使用。 但是,这种方法传递的并不是真正的HTTP Referer头,而是我们自定义的一个参数。如果B页面需要的是标准的HTTP Referer头(比如用于服务器端的来源验证),那么这种方法可能不适用。 方法3:使用iframe(尝试隐藏referrer) 另一种方法是在A页面中使用一个隐藏的iframe来加载B页面,但这种方法同样不能设置自定义的referrer,只能控制是否发送referrer。而且,使用iframe可能会来其他问题(如被浏览器阻止、跨域问题等)。 方法4:使用服务端中转 如果用户对B页面有控制权,那么可以在A页面跳转到自己的服务器(比如一个代理页面),然后由服务器重定向到B页面,并在重定向时设置Referer头。但是,请注意,服务器端设置Referer头也是受限制的,因为浏览器在跟随重定向时,会使用新的Referer(即代理页面的URL),而不是我们设置的任意值。 结论: 由于浏览器的安全策略,JavaScript无法直接设置跳转HTTP请求头中的Referer值。我们只能通过URL参数等方式间接传递我们想要的信息。 因此,建议的解决方案是: 在A页面跳转时,将需要传递的referrer信息作为参数附加到B页面的URL上,然后在B页面中读取这个参数并使用。 示例代码(A页面): ```html <script> function navigateToB() { var desiredReferrer = 'https://example.com'; // 你想要设置的特定Referrer值 var bUrl = 'https://B.com?custom_referrer=' + encodeURIComponent(desiredReferrer); window.location.href = bUrl; } </script> <button onclick="navigateToB()">跳转到B页面</button> ``` 在B页面中,我们可以这样获取: ```javascript // 解析URL参数 const urlParams = new URLSearchParams(window.location.search); const customReferrer = urlParams.get('custom_referrer'); console.log(customReferrer); // 输出:https://example.com ``` 这样,B页面就可以使用这个customReferrer值来代替HTTP Referer头了。 但是,如果B页面需要的是标准的HTTP Referer头(比如用于服务器端验证),那么这种方法就不适用。在这种情况下,可能需要重新设计应用逻辑,或者考虑使用OAuth等标准协议来传递来源信息。 注意:如果用户想要在跳转时不发送Referer(而不是伪造一个),则可以使用以下方法: 1. 使用`<a>`标签并添加`rel="noreferrer"`属性。 2. 使用meta标签设置整个页面的referrer策略。 但是,这些方法都不能设置一个任意的Referer值。 因此,根据用户的需求,我们只能通过URL参数传递自定义的“referrer”值,并在B页面中使用它。 相关问题: 1. 如何在HTML中设置页面级别的referrer策略? 2. 如何通过JavaScript获取当前页面的referrer? 3. 如何在不发送referrer的情况下跳转到另一个页面? 4. 如何通过服务器端重定向来传递referrer信息? 5. 在跨域跳转时,如何安全地传递来源信息?</think>### 在HTML中设置Referrer的JavaScript实现 在HTML中设置跳转时的Referrer值需要理解浏览器安全限制:**JavaScript无法直接修改HTTP请求头中的Referrer值**,但可以通过以下两种方法实现类似效果: --- ### 方法1:通过URL参数传递(推荐) 在A页面跳转时,将"伪Referrer"作为URL参数传递给B页面: ```html <!-- A页面代码 --> <script> function navigateWithCustomReferrer() { const customReferrer = "https://your-specific-referrer.com"; // 你的特定链接 const targetUrl = "https://B-page.com?custom_referrer=" + encodeURIComponent(customReferrer); window.location.href = targetUrl; } </script> <button onclick="navigateWithCustomReferrer()">跳转到B页面</button> ``` 在B页面获取参数: ```javascript // B页面代码 const urlParams = new URLSearchParams(window.location.search); const customReferrer = urlParams.get('custom_referrer'); console.log("接收到的Referrer:", customReferrer); ``` --- ### 方法2:使用中间页面清除Referrer(需控制B页面) 如果可控制B页面的服务端,可通过中间页面清除原始Referrer后传递自定义值: 1. **A页面** → **中间页面**(携自定义Referrer参数) ```html <!-- A页面 --> <a href="redirect.html?target=B.html&custom_referrer=YOUR_LINK">跳转</a> ``` 2. **中间页面**(清除Referrer后重定向) ```html <!-- redirect.html --> <script> const params = new URLSearchParams(location.search); const target = params.get('target'); const customRef = params.get('custom_referrer'); // 通过iframe清除Referrer const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.srcdoc = ` <script> top.location.replace("${target}?custom_referrer=${customRef}") </script> `; document.body.appendChild(iframe); </script> ``` 3. **B页面** 通过URL参数获取值(同方法1) --- ### 关键限制说明 1. **安全策略** 浏览器禁止JS直接修改Referrer头,这是防止伪造来源的安全措施[^1][^2]。 2. **替代方案** 所有方案本质都是通过URL参数传递值,而非真正修改HTTP头: - 真实Referrer头始终指向实际来源页(A页面) - `custom_referrer` 参数需在B页面主动解析使用 3. **Referrer策略控制** 可通过meta标签限制原始Referrer发送: ```html <!-- 在A页面头部添加 --> <meta name="referrer" content="no-referrer"> ``` --- ### 应用建议 - ✅ **简单场景**:使用方法1的URL参数传递 - ✅ **高安全需求**:结合服务端验证(B页面校验参数合法性) - ❌ **避免伪造**:不要尝试伪造第三方网站的Referrer,违反安全策略 --- ### 相关问题 1. 如何防止网站被钓鱼攻击利用Referrer伪造? 2. 不同浏览器的Referrer策略有哪些差异? 3. 如何在服务端验证Referrer的合法性? 4. 使用`rel="noreferrer"`对SEO有什么影响? 5. 跨域请求中Referrer的处理有哪些最佳实践? [^1]: 引用[1]:HTML跳转-获取 Referrer方法说起 [^2]: 引用[2]:web 项目跳转网址不加referrer信息 [^3]: 引用[3]:js中的referrer使用,返回上一页
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值