HTML5不提供URL跳转校验，必须用JavaScript拦截跳转并校验：优先用URL构造函数解析，检查protocol和hostname是否在白名单内；禁用javascript:、data:等危险协议；location.href和标签跳转前均需主动校验。
HTML5 本身不提供跳转地址的正则校验能力，所有校验必须由 JavaScript 主动执行；直接用 location.href 或 <a href> 跳转前不校验，等于完全放弃控制权。
怎么用 JavaScript 在跳转前校验 URL 合法性
核心逻辑是：拦截跳转动作 → 用正则（或更稳妥的 URL 构造函数）判断目标是否符合白名单规则 → 仅允许安全协议和域名。
- 别只依赖正则匹配
http://或https://开头——攻击者可构造javascript:alert(1)、data:text/html,<script>alert()</script>等绕过 - 推荐优先使用
URL构造函数解析，再检查url.protocol和url.hostname，比纯正则更可靠 - 示例校验逻辑：
function isValidRedirect(urlStr) { try { const url = new URL(urlStr); return ['http:', 'https:'].includes(url.protocol) && ['example.com', 'api.example.com'].includes(url.hostname); } catch { return false; } }
location.href 跳转前必须手动校验
这是最常见也最容易被忽略的漏洞点：后端返回跳转地址、前端直接赋值给 location.href，中间零校验。
- 错误写法：
location.href = response.redirectUrl;—— 若redirectUrl是javascript:fetch('/admin/delete')，就完了 - 正确流程：先过
isValidRedirect()，校验失败时抛错或跳转到默认页，绝不能静默放行 - 注意：IE 不支持
URL构造函数，如需兼容，可用正则 + 协议白名单双重判断，但务必排除javascript:、vbscript:、data:、about:
<a> 标签的 href 无法自动校验，得靠事件拦截
静态 HTML 中的 <a href="xxx"> 在点击瞬间就触发跳转，JS 来不及介入。必须改用事件绑定方式控制。
立即学习“前端免费学习笔记（深入）”；
- 不要这样写：
<a href="user_input_value">跳转</a> - 应该这样：
<a href="#" data-url="user_input_value" onclick="safeJump(this)">跳转</a>，然后在safeJump()里做校验和跳转 - 或者用事件委托统一处理：
document.body.addEventListener('click', e => { if (e.target.matches('[data-safe-redirect]')) { ... } }) - 补充：对用户可控的
href值，服务端渲染时也应做过滤，前端校验只是最后一道防线
真正难的不是写正则，而是定义清楚「合法」范围——协议、域名、路径层级、是否允许 query 参数，这些都要结合业务定死。一个没覆盖的 localhost 或 127.0.0.1 就可能让 XSS 绕过内网防护。
