广告链接必须加rel="noopener noreferrer"，因广告页不可控，不加则面临tabnabbing攻击风险：新页可通过window.opener劫持原页url或执行脚本；noreferrer还防止referer泄露路径，避免反向追踪。
target="_blank" 加 rel="noopener noreferrer" 是唯一安全、稳定、符合现代标准的设置方式。只写 target="_blank" 会暴露原页面给广告页，被劫持或拖慢是真实风险，不是理论警告。
为什么广告链接必须加 rel="noopener noreferrer"
广告页通常不可控（第三方、动态加载、域名多变），不加 rel="noopener" 会让广告页通过 window.opener 直接修改你当前页的 URL 或执行脚本——这就是 Tabnabbing 攻击。浏览器控制台可能不报错，但 console.log(opener) 在广告页里能直接看到你的页面对象。加 noreferrer 还能防止 Referer 泄露你站点路径，避免被用于反向追踪或统计干扰。
-
rel="noopener"是底线，不能省；noreferrer推荐一起加，尤其涉及外部广告联盟 - 用 Vue/React 动态渲染广告时，容易漏掉
rel，建议封装成<adlink></adlink>组件统一注入 - 邮件模板、CMS 富文本编辑器里粘贴的广告链接，常自动删掉
rel，上线前需正则扫描：/<a>]*href=/gi</a>配合检查是否含rel=
广告区域不是 标签怎么办
Banner 图、SVG 热区、div 模拟按钮这些非语义化点击区域，不能靠 target 属性生效——它们压根不支持 target。必须用 window.open()，但得绕过弹窗拦截：
- 必须在用户真实点击事件回调内调用，比如
element.addEventListener('click', () => window.open(url, '_blank')) - 不能包装在
setTimeout、Promise.then或异步接口回调里，否则 Chrome/Firefox/Safari 全拦截，控制台报Blocked opening 'xxx' in a new window because the request was made without user activation - 如果广告是懒加载或 SSR 渲染后挂载的，确保事件绑定时机正确，避免
addEventListener绑定到不存在的节点上
表单类广告（如“立即试用”按钮）怎么处理
有些广告走表单提交（例如收集手机号后跳转落地页），这时可以用 <form target="_blank"></form>，但它有硬限制：
-
<form></form>不支持rel属性，无法切断window.opener，存在安全审计失败风险 - 返回内容必须是 HTML 页面；如果后端返回 JSON 或触发下载，新标签页会显示空白或弹保存框
- 跨域广告落地页 + 表单 POST 极易出错，推荐改用 GET 跳转或 JS 提交后
window.open()手动打开
移动端 WebView 里广告点不开新窗口？
微信、QQ、部分安卓内置浏览器对 target="_blank" 支持极差，甚至完全忽略。这不是 bug，是厂商主动限制——它们想把用户留在自己的生态里。此时必须降级为 JS 方案：
- 先检测环境：
if (/MicroMessenger|QQBrowser/.test(navigator.userAgent)) - 用
window.open(url, '_blank')替代，但注意：iOS Safari 对非<a></a>触发的window.open也拦截，所以最好让广告容器本身是<a></a>，仅用 JS 补充逻辑 - 禁用 JavaScript 的用户收不到广告，这是权衡结果，但广告场景中这类用户占比可忽略
真正难处理的不是语法，而是广告链路中混入了 iframe、重定向跳转、CSP 策略拦截或 base 标签覆盖 target。这些不会报明显错误，但会让新窗口行为彻底失效，需要逐层检查 network 面板里的响应头和重定向路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
