rel属性noopener和noreferrer区别_外链安全打开方式技巧

现代浏览器已默认启用 noopener，rel="noopener" 不再提升安全性；rel="noreferrer" 则真实清空 referrer 数据，影响来源统计，需按需谨慎使用。

现在给外链加 rel="noopener noreferrer" 已不是必须操作，但不等于可以随便删 —— 关键看你的目标浏览器范围、是否用 HTTPS、以及是否在意 referrer 数据丢失。

为什么 rel="noopener" 不再强制需要

Chrome、Firefox、Edge 等主流浏览器自 2021 年起，对 target="_blank" 链接已默认启用 noopener 行为。也就是说，即使你没写这个属性，window.opener 也已经是 null，无法被新页面劫持原页面跳转。

这意味着：

• 手动加 rel="noopener" 不再提升安全性，只增加 HTML 体积
• 老旧浏览器（如 IE、旧版 Safari）仍需它，但这类用户占比极低，多数项目可忽略
• WordPress 等 CMS 默认插入该属性，其实是历史惯性，不是当前安全刚需

rel="noreferrer" 会真实影响 referrer 数据

这个属性的作用是主动清空 Referer HTTP 请求头和 document.referrer JS 属性。它不像 noopener 那样有浏览器兜底 —— 没写就是会发，写了就一定不发。

后果很具体：

• Google Analytics 或其他统计工具里，点击该链接的流量会归为「直接访问」，而非「引荐流量」
• 如果你依赖 referrer 判断用户来源（比如做渠道归因、AB 测试分流），加了 noreferrer 就等于主动丢数据
• HTTPS 站点之间本就不会泄露路径级 referrer（只传 origin），所以对隐私提升非常有限

要不要一起写成 rel="noopener noreferrer"

组合写法仍是常见实践，但要清楚每部分的实际作用：

• noopener：现代浏览器下纯冗余，仅兼容老环境；若你明确支持 Chrome 90+ / Firefox 85+，可省略
• noreferrer：真实生效，但会切断 referrer 传递；如果 SEO 或运营分析需要来源信息，就不该加
• 二者无功能重叠：noreferrer 不等价于 noopener，它不能阻止 window.opener 访问（在不支持 noopener 的老浏览器中）

更务实的做法是：外链统一用 target="_blank"，不加任何 rel；仅在明确需要隐藏 referrer（如跳转到敏感合作方）时，才单独加 rel="noreferrer"。

真正容易被忽略的是：很多团队把 rel="noopener noreferrer" 当成“安全标配”批量注入，却没评估过自己是否真的需要它 —— 尤其当 referrer 是你归因链关键一环时，加了反而破坏数据闭环。