这两个属性都用于链接安全，但它们在功能和保护范围上有重要区别：核心区别：
| 属性(Attributes) | 功能（Function） | 安范围全(Security Scope) |
|---|---|---|
| rel="noopener" | 阻止新打开的页面访问原页面的 window.opener对象 | 防止反向标签页操控攻击 |
| rel="noreferrer" | 阻止发送 Referer HTTP 头信息 | 防止来源信息泄露 |
| rel="noopener noreferrer" | 同时具备上述两种功能 | 全面保护 |
详细解释
rel="noopener"
- 功能：当链接使用 target="_blank"打开新标签页时，防止新页面通过 window.opener访问原始页面
- 安全问题解决：防止恶意网站修改原始页面的URL（反向标签页操控攻击）
- 浏览器支持：所有现代浏览器（Chrome、Firefox、Safari、Edge）
rel="noreferrer"
- 功能：阻止浏览器在请求新页面时发送 Referer HTTP 头
- 安全问题解决：防止目标网站知道用户来自哪个页面（保护隐私）
- 额外效果：在旧版浏览器中，noreferrer会隐含 noopener的功能
- 浏览器支持：所有现代浏览器
rel="noopener noreferrer"
- 功能：同时具备 noopener和 noreferrer的功能
- 最佳实践：当同时需要防止反向标签页操控和保护来源隐私时使用
- 推荐场景：所有外部链接（特别是用户生成内容中的链接）
链接安全属性对比
当使用 target="_blank" 打开新标签页时，使用 rel 属性可以增强安全性。
基本链接（不安全）
<a href="https://example.com" target="_blank">示例链接</a>
❌ 没有安全保护
使用 noopener
<a href="https://example.com" target="_blank" rel="noopener">示例链接</a>
✅ 防止反向标签页操控攻击
使用 noopener noreferrer
<a href="https://example.com" target="_blank" rel="noopener noreferrer">示例链接</a>
✅ 防止反向标签页操控攻击✅ 防止来源信息泄露
最佳实践建议
对于所有外部链接（特别是用户生成内容中的链接），推荐始终使用：
rel="noopener noreferrer"这提供了最全面的安全保护，防止两种不同类型的攻击。
关键点总结
- noopener 是防止反向标签页操控攻击的基本安全措施
- noreferrer 提供额外的隐私保护，防止来源信息泄露
- 组合使用 noopener noreferrer是最安全的做法
- 现代浏览器 都支持这些属性，无需担心兼容性问题
- 最佳实践：对所有外部链接使用 rel="noopener noreferrer"