嗨，我是芦苇Z。
本文聊聊每个前端都踩过、却常被一笔带过的坑：<a> 标签的 rel 属性。
看完你马上能告诉自己： "以后凡是 target="_blank"，我都先写 noopener，再按需补其他。"
1. 先搞懂两件事
| 问题 | 一句话答案 |
|---|---|
rel 是干嘛的？ |
告诉浏览器"我和那条链接是啥关系"，顺带决定要不要把上一页的信息交出去。 |
为啥总跟 target="_blank" 一起出现？ |
新标签页会拿到 window.opener 指针，能反过来篡改来源页------这叫 reverse tabnabbing。 |
2. 安全两件套：noopener / noreferrer
| 属性 | 干什么 | 额外效果 | 推荐场景 |
|---|---|---|---|
noopener |
切断 window.opener |
无 | 所有 target="_blank" 都加，先保命 |
noreferrer |
不发送 Referer 请求头 |
现代浏览器顺带切断 window.opener |
不想让目标站知道你从哪来 |
"切断
window.opener"到底是啥？默认情况下，新标签页里
window.opener指向"是谁把我打开"的那个页面。有了这把"回头钥匙"，新页面可以：
- 把原来的页面跳转到假登录页（reverse tabnabbing 反向标签劫持）；
- 用
opener.document直接读写来源页（跨域时受限，但仍可 location 跳转）。
写上noopener后，浏览器干脆把这把钥匙掰断------新页面拿到的window.opener是null，想搞事也找不到门。
一句话记住：
"只保命" → noopener； （"断钥匙，防回头。" ）
"既保命又隐身" → noopener noreferrer（两词顺序随意）。
html
<!-- 最常用：外链新开标签 -->
<a href="https://external.example"
target="_blank"
rel="noopener noreferrer">
外部资源
</a>3. 搜索引擎专用暗号
| 属性 | 翻译给谷歌听 | 实战场景 |
|---|---|---|
nofollow |
"别递权重，我只是提一嘴" | 不可信的外链 |
ugc |
"这是用户自己发的" | 评论、论坛帖子 |
sponsored |
"我收钱了" | 广告、软文 |
不会阻止收录！只是不递权重，别再把 nofollow 当 robots.txt 用。
html
<!-- 评论里出现的链接 -->
<a href="https://xxx.com"
target="_blank"
rel="noopener nofollow ugc">
用户分享的地址
</a>4. 其他常见 rel 速查
| 类型 | 举例 | 一句话说明 |
|---|---|---|
| 文档关系 | alternate author canonical prev/next |
给爬虫或浏览器指路，不影响安全 |
| 预加载 | preload prefetch dns-prefetch |
性能优化，和 <link> 更配 |
| 书签 | bookmark |
永久锚点，几乎用不上 |
5. 我只想藏 Referer，行不行？
可以，但别全站甩 noreferrer，用 referrerpolicy 更细：
html
<a href="https://external.example"
target="_blank"
rel="noopener"
referrerpolicy="strict-origin-when-cross-origin">
外部资源
</a>常见取值：
no-referrer / origin / strict-origin-when-cross-origin
记不住？Chrome DevTools Network 面板里看一眼 Referer 头就明白。
6. 三句话总结（贴墙用）
- 凡是
target="_blank"，先写rel="noopener"。 - 不想暴露来源，再补
noreferrer或直接上referrerpolicy。 - SEO 场景按需加
nofollow/ugc/sponsored，别让搜索引擎误会你卖链接。
复制下方代码，当成 Snippet 用，以后再也不用拼手指：
html
<!-- 外链通用模板 -->
<a href="URL"
target="_blank"
rel="noopener noreferrer nofollow">
文本
</a>祝你写链接写得开心，别再被安全扫描报告追着跑。
📚 参考资料
- MDN：<a>
- MDN：rel 属性
- MDN：noopener 与 window.opener
- MDN：noreferrer 与 Referrer-Policy
- WHATWG HTML Standard：Link types
- 原文 HTML标签的 rel 属性全解析