最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
index.html中的超链接如何在新窗口打开？
时间：2026-07-27 09:58:48 编辑：袖梨 来源：一聚教程网
只写 target="_blank" 不够安全，因为外部页面可通过 window.opener 劫持原页面（tabnabbing 攻击），并默认泄露 Referer 信息；必须搭配 rel="noopener noreferrer" 才能切断 opener 引用并阻止 referer 发送。
target="_blank" 是最直接有效的办法，但单独用它有安全风险，必须搭配 rel="noopener noreferrer" 才算稳妥。
为什么只写 target="_blank" 不够安全
当页面 A 用 target="_blank" 跳转到外部页面 B 时，B 页面可通过 window.opener 访问 A 的 window 对象——这意味着 B 可以调用 window.opener.location = 'https://malicious.site' 劫持原页面，即所谓 tabnabbing 攻击。同时，referrer 信息也会默认泄露。
添加 rel="noopener noreferrer" 后：
- noopener 切断 window.opener 引用，让 B 页面无法操控 A
- noreferrer 阻止 Referer 请求头发送，保护来源隐私
- 二者缺一不可；仅加 noopener 仍会发 referrer，仅加 noreferrer 不防 opener 操控
rel="noopener noreferrer" 必须和 target="_blank" 同时出现
写法只有这一种正确形式，顺序无关，但必须共存：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问示例网站</a>
常见错误包括：
- 忘记 rel 属性，只写 target="_blank"
- 写成 rel="noopener" 或 rel="noreferrer" 单独一个
- 把 rel 错写成 ref（拼写错误）
- 在内部链接（如 /about.html）上滥用该组合——没必要，还影响历史导航体验
不推荐用 <base target="_blank"> 统一设置
虽然在 <head> 里加 <base target="_blank"> 能让所有没显式指定 target 的链接都新窗口打开，但它有硬伤：
- 无法为每个链接单独配 rel 属性，导致全部缺失 noopener noreferrer
- 会影响表单提交、图片链接、CSS @import 等所有带 URL 的行为，超出预期范围
- 内部跳转锚点（如 #section2）也会被强制新窗口打开，破坏页面内导航
- 现代框架（React/Vue）中更难控制，容易和路由逻辑冲突
动态添加时注意 DOM 时机与选择器精度
如果用 JavaScript 批量补全外部链接的属性，要确保：
- 在 DOM 加载完成后再执行（如 DOMContentLoaded 事件）
- 用准确的选择器区分内外链，例如：
– 匹配绝对外部 URL：document.querySelectorAll('a[href^="http"]:not([href*="yourdomain.com"])')
– 避免误伤 mailto:、tel:、javascript: 等协议链接
- 补属性前先检查是否已有 target 或 rel，避免重复添加
- 不要用 onclick="window.open(...)” 替代原生 a 标签——会丢失右键菜单、SEO、可访问性支持
真正需要新窗口打开的，基本只有三类：可信度存疑的外部站点、需独立操作的第三方服务（如支付页）、用户明确要求保留原页上下文的下载链接。其他情况，默认 _self 才是合理起点。
立即学习“前端免费学习笔记（深入）”；
相关文章
- 斑马英语APP课程购买记录怎么管理 07-27
- 豆包图片如何生成 07-27
- HMCL启动器怎样用微软登录 07-27
- 高性价比旅行app哪个好用 便宜旅行app有哪些 07-27
- 十大优质买房平台app排行榜 好用的买房平台app大全 07-27
- 便宜的卖房app十大排行榜盘点 性价比高的卖房app十大排行榜有哪些 07-27