本教程旨在指导开发者如何为自定义返回按钮添加域名验证逻辑，确保用户在点击返回时，页面导航行为符合预期，即仅返回到同源或信任域内的前一页面。通过利用document.referrer和window.location.hostname，我们能有效提升网站导航的安全性与用户体验，避免意外跳转到外部或不受信任的页面。
一、理解history.back()的局限性与导航安全考量
在Web开发中，history.back()是一个常用的JavaScript方法，用于模拟浏览器“后退”按钮的行为，将用户导航到历史记录中的前一个页面。然而，当我们在页面中实现一个自定义的“返回”按钮时，直接调用history.back()可能会带来一些潜在的问题：
- 意外导航到外部网站： 如果用户是从一个外部网站链接到当前页面的，那么history.back()会将用户带回到那个外部网站。这可能不是我们期望的用户体验，尤其是在需要用户保持在当前应用生态系统内的场景。
- 安全性风险： 在某些特定情况下，如果用户是从一个恶意或不受信任的网站跳转过来的，直接返回可能会让用户重新回到潜在的风险环境。
- 用户体验一致性： 对于复杂的单页应用（SPA）或多步流程，我们可能希望“返回”操作能引导用户回到应用内的特定状态或页面，而不是简单地回退到浏览器历史中的任意一个页面。
为了解决这些问题，我们需要一种机制来判断前一个页面（即document.referrer）是否属于当前网站的域名，从而在执行history.back()之前增加一层安全验证。
二、核心原理：document.referrer与window.location.hostname
要实现对前一页面域名的验证，我们需要利用两个关键的JavaScript属性：
立即学习“Java免费学习笔记（深入）”；
- document.referrer： 这个属性返回用户导航到当前页面时，前一个页面的完整URL。如果用户是直接输入URL或从书签访问当前页面，或者前一个页面设置了严格的Referrer-Policy，则document.referrer可能为空字符串。
- window.location.hostname： 这个属性返回当前页面URL的主机名部分，不包括端口号。例如，对于https://www.example.com/path，window.location.hostname将是www.example.com。
通过比较document.referrer中包含的域名信息与window.location.hostname，我们就可以判断前一个页面是否与当前页面处于同一域名下。
三、实现安全的自定义返回功能
下面是一个JavaScript函数，它演示了如何结合使用document.referrer和window.location.hostname来安全地执行返回操作：
/**
* 安全地执行历史记录回退操作。
* 只有当前页面的referrer（来源页面）包含当前页面的主机名时，才执行 history.back()。
* 这样可以确保用户仅返回到同源或同一域名下的前一页面。
*/
function goBackSafely() {
// 检查 document.referrer 是否存在且包含当前页面的主机名
// 使用 includes() 方法进行宽松匹配，确保来源域名是当前域名的一部分
if (document.referrer && document.referrer.includes(window.location.hostname)) {
history.back();
} else {
// 如果 referrer 不存在、为空或不包含当前主机名，
// 可以选择执行其他操作，例如：
// 1. 跳转到网站首页
// window.location.href = '/';
// 2. 显示提示信息
// alert('无法返回到非本站页面，或来源信息不可用。');
// 3. 默认仍然执行 history.back() (如果希望在未知情况下也回退)
// history.back();
// 4. 保持当前页面不变
console.warn('无法安全地返回到前一页面：referrer无效或非本站域名。');
}
}
// 示例：如何将此函数绑定到HTML按钮
// 代码解析：
- function goBackSafely()： 定义了一个名为goBackSafely的函数，封装了我们的安全返回逻辑。
-
document.referrer && document.referrer.includes(window.location.hostname)：
- document.referrer：首先检查document.referrer是否存在（不为空字符串）。这是必要的，因为如果referrer为空，includes()方法会抛出错误或行为异常。
- .includes(window.location.hostname)：如果document.referrer存在，则检查其字符串内容是否包含window.location.hostname。这是一种简单有效的同域名判断方式。
- history.back()： 如果条件满足（即前一个页面是本站域名），则执行标准的浏览器回退操作。
- else块： 如果条件不满足，意味着前一个页面不是本站域名，或者document.referrer不可用。在这种情况下，我们不执行history.back()，而是提供了一些备选处理方案，如跳转到首页、显示警告信息或保持当前页面。开发者应根据具体的应用场景选择合适的处理方式。
四、进阶考量与注意事项
尽管上述方法提供了一个基本的安全返回机制，但在实际应用中，还需要考虑以下几点：
-
Referrer Policy的影响：
- 网站可以通过HTTP响应头Referrer-Policy来控制document.referrer的发送行为。例如，如果设置为no-referrer，则document.referrer将始终为空。
- 如果您的网站或用户访问的外部网站使用了严格的Referrer-Policy，可能会导致document.referrer为空，从而使上述检查失败。在这种情况下，您需要决定当document.referrer为空时，是允许回退、跳转到默认页面还是阻止回退。
-
子域名处理：
- document.referrer.includes(window.location.hostname)方法对于子域名可能不够精确。例如，如果当前页面是sub.example.com，而前一个页面是www.example.com，includes('sub.example.com')可能会失败，即使它们都属于example.com这个主域名。
- 更精确的同源判断可以解析document.referrer的hostname部分，并与window.location.hostname进行比较，或者提取顶级域名进行比较。例如：
function goBackMoreStrictly() { try { const referrerUrl = new URL(document.referrer); if (referrerUrl.hostname === window.location.hostname) { history.back(); } else { console.warn('Referrer hostname does not match current hostname.'); } } catch (e) { console.warn('Could not parse referrer or referrer is empty:', e); // 处理 referrer 不可用或解析失败的情况 } }
-
用户体验优化：
- 当无法执行安全返回时，向用户提供明确的反馈非常重要。是跳转到首页、显示一个模态框提示，还是仅仅在控制台输出警告，应根据产品需求而定。
- 在某些场景下，如果document.referrer为空，但用户确实是从您的应用内部导航过来的（例如，通过直接链接或新标签页打开），您可能仍然希望允许history.back()。这需要更复杂的逻辑来判断用户意图。
-
单页应用（SPA）中的路由：
- 在SPA中，history.back()通常只回退到上一个路由状态，而不是实际的页面加载。如果您希望在SPA中实现更精细的返回控制，可能需要结合路由库（如React Router, Vue Router）提供的导航守卫和历史管理功能。
总结
通过在自定义返回按钮中加入对document.referrer和window.location.hostname的验证，我们可以显著提升网站导航的安全性、可靠性和用户体验。这种方法能够有效防止用户意外跳转到外部网站，并确保导航行为符合应用预期。在实现时，建议根据具体需求考虑Referrer Policy、子域名处理以及用户体验反馈等进阶问题，从而构建一个健壮且用户友好的导航系统。
