内部链接中document.referrer为空的原因及获取方法

这是否属于正常现象？ #

这种情况不属于正常现象。在同域名（无子域名）的HTTPS网站中，点击内部链接跳转时，document.referrer本应正确返回跳转前的页面完整URL。出现空值通常是浏览器隐私策略、页面referrer配置错误或特殊跳转方式导致的异常情况。

无子域名内部链接场景下获取来源的方案 #

1. 检查并修正referrer策略配置 #

• 查看页面的<meta>标签：如果存在<meta name="referrer" content="no-referrer">或content="origin"这类限制同域referrer传递的配置，将其改为content="strict-origin-when-cross-origin"（浏览器默认值，同域会传递完整referrer），或者直接删除该meta标签。
• 检查内部链接的属性：如果<a>标签添加了referrerpolicy="no-referrer"或rel="noreferrer"，移除这些属性即可恢复referrer传递。

2. 调整跳转方式 #

• 避免使用带noreferrer参数的JavaScript跳转，比如window.open(url, '_blank', 'noreferrer')会屏蔽referrer，去掉noreferrer参数即可；使用window.location.href = url这类常规跳转方式不会有问题。
• 确保普通<a>标签没有添加rel="noreferrer"属性。

3. 手动传递来源信息（隐私策略限制时的 fallback 方案） #

如果浏览器隐私模式或严格隐私策略导致自动referrer无法传递，可以通过以下方式手动实现：

• URL查询参数传递：
  在跳转链接中添加来源参数：

  <a href="/target-page?from=/current-page">跳转到目标页</a>
  

  在目标页面读取参数：

  const searchParams = new URLSearchParams(window.location.search);
  const internalReferrer = searchParams.get('from');
  

• SessionStorage存储：
  在跳转前的页面存储当前URL：

  // 跳转前执行
  sessionStorage.setItem('internalReferrer', window.location.href);
  

  在目标页面读取并清除：

  // 目标页面加载时执行
  const internalReferrer = sessionStorage.getItem('internalReferrer');
  sessionStorage.removeItem('internalReferrer'); // 避免后续页面误读
  

内容的提问来源于stack exchange，提问作者mfrachet