JavaScript实现智能返回：验证referrer域名以增强导航安全性

本教程旨在指导开发者如何为自定义返回按钮添加域名验证逻辑，确保用户在点击返回时，页面导航行为符合预期，即仅返回到同源或信任域内的前一页面。通过利用document.referrer和window.location.hostname，我们能有效提升网站导航的安全性与用户体验，避免意外跳转到外部或不受信任的页面。

一、理解history.back()的局限性与导航安全考量

在Web开发中，history.back()是一个常用的JavaScript方法，用于模拟浏览器“后退”按钮的行为，将用户导航到历史记录中的前一个页面。然而，当我们在页面中实现一个自定义的“返回”按钮时，直接调用history.back()可能会带来一些潜在的问题：

1. 意外导航到外部网站： 如果用户是从一个外部网站链接到当前页面的，那么history.back()会将用户带回到那个外部网站。这可能不是我们期望的用户体验，尤其是在需要用户保持在当前应用生态系统内的场景。
2. 安全性风险： 在某些特定情况下，如果用户是从一个恶意或不受信任的网站跳转过来的，直接返回可能会让用户重新回到潜在的风险环境。
3. 用户体验一致性： 对于复杂的单页应用（SPA）或多步流程，我们可能希望“返回”操作能引导用户回到应用内的特定状态或页面，而不是简单地回退到浏览器历史中的任意一个页面。

为了解决这些问题，我们需要一种机制来判断前一个页面（即document.referrer）是否属于当前网站的域名，从而在执行history.back()之前增加一层安全验证。

二、核心原理：document.referrer与window.location.hostname

要实现对前一页面域名的验证，我们需要利用两个关键的JavaScript属性：

立即学习“Java免费学习笔记（深入）”；

1. document.referrer： 这个属性返回用户导航到当前页面时，前一个页面的完整URL。如果用户是直接输入URL或从书签访问当前页面，或者前一个页面设置了严格的Referrer-Policy，则document.referrer可能为空字符串。
2. window.location.hostname： 这个属性返回当前页面URL的主机名部分，不包括端口号。例如，对于https://www.example.com/path，window.location.hostname将是www.example.com。

通过比较document.referrer中包含的域名信息与window.location.hostname，我们就可以判断前一个页面是否与当前页面处于同一域名下。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

73

查看详情

三、实现安全的自定义返回功能

下面是一个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按钮
// <button onclick="goBackSafely()">返回</button>

代码解析：

1. function goBackSafely()： 定义了一个名为goBackSafely的函数，封装了我们的安全返回逻辑。
2. document.referrer && document.referrer.includes(window.location.hostname)：
   • document.referrer：首先检查document.referrer是否存在（不为空字符串）。这是必要的，因为如果referrer为空，includes()方法会抛出错误或行为异常。
   • .includes(window.location.hostname)：如果document.referrer存在，则检查其字符串内容是否包含window.location.hostname。这是一种简单有效的同域名判断方式。
3. history.back()： 如果条件满足（即前一个页面是本站域名），则执行标准的浏览器回退操作。
4. else块： 如果条件不满足，意味着前一个页面不是本站域名，或者document.referrer不可用。在这种情况下，我们不执行history.back()，而是提供了一些备选处理方案，如跳转到首页、显示警告信息或保持当前页面。开发者应根据具体的应用场景选择合适的处理方式。

四、进阶考量与注意事项

尽管上述方法提供了一个基本的安全返回机制，但在实际应用中，还需要考虑以下几点：

1. Referrer Policy的影响：
   • 网站可以通过HTTP响应头Referrer-Policy来控制document.referrer的发送行为。例如，如果设置为no-referrer，则document.referrer将始终为空。
   • 如果您的网站或用户访问的外部网站使用了严格的Referrer-Policy，可能会导致document.referrer为空，从而使上述检查失败。在这种情况下，您需要决定当document.referrer为空时，是允许回退、跳转到默认页面还是阻止回退。
2. 子域名处理：
   • 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 不可用或解析失败的情况
         }
     }

     登录后复制
3. 用户体验优化：
   • 当无法执行安全返回时，向用户提供明确的反馈非常重要。是跳转到首页、显示一个模态框提示，还是仅仅在控制台输出警告，应根据产品需求而定。
   • 在某些场景下，如果document.referrer为空，但用户确实是从您的应用内部导航过来的（例如，通过直接链接或新标签页打开），您可能仍然希望允许history.back()。这需要更复杂的逻辑来判断用户意图。
4. 单页应用（SPA）中的路由：
   • 在SPA中，history.back()通常只回退到上一个路由状态，而不是实际的页面加载。如果您希望在SPA中实现更精细的返回控制，可能需要结合路由库（如React Router, Vue Router）提供的导航守卫和历史管理功能。

总结

通过在自定义返回按钮中加入对document.referrer和window.location.hostname的验证，我们可以显著提升网站导航的安全性、可靠性和用户体验。这种方法能够有效防止用户意外跳转到外部网站，并确保导航行为符合应用预期。在实现时，建议根据具体需求考虑Referrer Policy、子域名处理以及用户体验反馈等进阶问题，从而构建一个健壮且用户友好的导航系统。

以上就是JavaScript实现智能返回：验证referrer域名以增强导航安全性的详细内容，更多请关注php中文网其它相关文章！