如何防止用户直接访问HTML网站内部页面及referrer验证跳转异常求助

问题根因 #

你当前的重定向逻辑错误主要来自两个方面：

1. document.referrer 的全等判断逻辑错误：该属性返回的是完整的来源页面URL，比如你的登录页地址是 https://你的域名/login.html，登录提交后跳转的来源值就是这个完整地址，而非你写的单纯域名，因此判断条件永远不成立，触发重定向逻辑。
2. Referrer本身存在天然限制：用户手动输入地址、浏览器开启隐私模式、跨域/HTTPS转HTTP等场景下都会丢失Referrer值，这种校验方式本身就不可靠，且纯前端校验很容易被用户禁用JS绕过。

临时修复方案 #

如果你只想快速修复当前的跳转问题，可以把全等判断改成包含匹配即可：

<script>
const referrer = document.referrer;
// 替换为你自己的站点域名，例如 "example.com"
const siteDomain = "你的域名";
if (referrer.includes(siteDomain)) {
    console.log(referrer);
} else {
    window.location.href = "/";
}
</script>

推荐的可靠权限校验方案 #

纯前端的页面访问限制只能防普通用户，建议你改用更可靠的校验逻辑：

• 登录成功后由服务端颁发登录凭证（JWT令牌、SessionID均可），存在用户浏览器的Cookie或者localStorage中
• page.html加载时优先判断是否存在合法的有效登录凭证，不存在则直接跳转回登录页
• 最优方案是增加服务端校验：所有页面请求到达服务端时，先校验用户登录状态，未登录直接返回302重定向到登录页，从根源上避免路径绕过的问题

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