只写 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）上滥用该组合——没必要，还影响历史导航体验
不推荐用
虽然在 里加 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 才是合理起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
