本文介绍一种利用浏览器 localstorage 实现“仅拦截手动 url 输入、放行导航栏点击”的轻量级防护方案，避免传统服务端判断导致的合法页面跳转被误拒。
本文介绍一种利用浏览器 localstorage 实现“仅拦截手动 url 输入、放行导航栏点击”的轻量级防护方案，避免传统服务端判断导致的合法页面跳转被误拒。
在 Web 开发中，单纯依靠服务端（如 PHP）检测 $_SERVER['SCRIPT_FILENAME'] 与请求路径是否一致，虽能阻止直接 URL 访问，但无法区分请求来源——无论是用户手动输入地址栏，还是通过站内 <a href="page.php"></a> 点击跳转，HTTP 请求对服务器而言本质相同（均为 GET 请求），因此该逻辑会一并拦截所有合法导航，违背设计初衷。
真正的解法在于引入客户端上下文标识：利用浏览器 localStorage 在用户主动触发导航时预先设置标记，并在目标页加载时验证该标记是否存在。若标记缺失，则判定为非受控访问（如直接输入 URL），执行重定向或拒绝响应；若存在，则视为可信跳转，允许页面正常渲染。
✅ 实现步骤（前后端协同）
1. 导航栏链接改造（添加 JS 跳转逻辑）
将原生 <a href="about.php"></a> 替换为 JavaScript 驱动的跳转，确保每次点击前写入标记：
<!-- 替换所有 navbar 链接 -->
<a href="#" onclick="navigateTo('about.php'); return false;">关于我们</a>
<a href="#" onclick="navigateTo('contact.php'); return false;">联系我们</a>
<script>
function navigateTo(url) {
// 设置可信标记
localStorage.setItem('nav_jump', 'true');
// 延迟跳转，确保标记已写入
setTimeout(() => {
window.location.href = url;
}, 0);
}
</script>2. 目标页面顶部加入客户端校验逻辑
在 about.php、contact.php 等受保护页面的 中嵌入校验脚本（务必置于 HTML 最顶部）：
<script>
// 页面加载时立即校验
if (!localStorage.getItem('nav_jump')) {
// 标记不存在 → 判定为直接访问
window.location.href = 'index.php'; // 或显示 403 页面
} else {
// 清除标记，防止重复使用或跨会话残留
localStorage.removeItem('nav_jump');
}
</script>⚠️ 注意事项：
- 此方案依赖 JavaScript，禁用 JS 的用户将无法访问受保护页面（需权衡兼容性，生产环境建议配合服务端基础鉴权兜底）；
localStorage属同源存储，无需担心跨域泄露，但无法防御恶意用户手动写入标记（属前端弱校验，仅适用于非敏感场景，如内容展示页防爬虫粗略拦截）；- 若需更高安全性，应结合服务端 Session 标记（如点击时生成一次性 token 并传参，服务端验证后销毁），但会增加复杂度。
? 总结
该方案以最小侵入性达成目标：通过 localStorage 作为“导航通行证”，使服务端无需参与来源判断，完全由前端行为链（点击→设标→跳转→验标→清标）闭环控制访问路径。它不是绝对安全的权限系统，而是面向用户体验优化的友好型访问策略——既阻止了随意 URL 猜测，又保障了站内导航的流畅性。
