使用 target="_blank" 时必须同时设置 rel="noopener noreferrer"，否则新页面可通过 window.opener 操控原页面或泄露 Referer；旧版浏览器不支持 noreferrer 对 opener 的隔离，故需显式写全；动态创建链接、服务端渲染及 Markdown 渲染均需手动补全该属性。
为什么 target="_blank" 单独用有安全风险
直接写 链接 会导致新页面能通过 window.opener 访问原页面的 window 对象，可能被恶意网站篡改跳转、执行钓鱼或 SEO 劫持。现代浏览器（Chrome 88+、Firefox 91+）已默认对无 rel 的 target="_blank" 自动补 rel="noopener"，但旧版浏览器和部分 WebView 不会，不能依赖。
rel="noopener noreferrer" 必须同时设置才稳妥
这两个值解决不同问题：noopener 切断 window.opener 引用；noreferrer 阻止 Referer 头发送（避免泄露来源路径），也隐式包含 noopener（但为兼容性仍建议显式写全）。
安全打开
- 不加
rel：存在 opener 漏洞，尤其外链不可信时 - 只加
rel="noopener"：安全，但会发Referer - 只加
rel="noreferrer"：安全且不发Referer，但低版本 Safari（≤12.1）不支持noreferrer对window.opener的隔离 - 推荐始终用
rel="noopener noreferrer"：覆盖所有主流环境
JavaScript 动态创建链接时别漏掉 rel
用 document.createElement('a') 或 innerHTML 插入带 target="_blank" 的链接，容易只设 target 而忽略 rel。这是线上常见疏漏点。
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.rel = 'noopener noreferrer'; // 这行不能少
link.textContent = '点击';
document.body.appendChild(link);
- 用
setAttribute也一样：必须显式调用link.setAttribute('rel', 'noopener noreferrer') - 服务端渲染（如 PHP/Node.js 拼 HTML）同样要检查模板中是否硬编码了
target却没配rel - 使用 Markdown 渲染器（如 marked、remark）时，需确认其是否自动补
rel—— 大多数默认不补，得自己加插件或后处理
要不要加 referrerpolicy？看场景
referrerpolicy 是更细粒度控制 Referer 的属性，和 rel="noreferrer" 效果重叠但优先级更高。一般不需要额外加，除非有特殊需求：
立即学习“前端免费学习笔记（深入）”；
- 想保留部分 Referer（比如只传域名，不传路径）：用
referrerpolicy="strict-origin" - 完全禁用 Referer 且需兼容极老环境（如 Android 4.4 WebView）：
rel="noreferrer"已足够 - 同时用了
rel="noreferrer"和referrerpolicy，后者会生效，前者被忽略 —— 所以二者选一即可，不必叠用
rel 属性最容易缺失。 
