HTML5链接新窗口打开方法及设置

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《HTML5链接新窗口打开方法_target="_blank"设置》，聊聊，我们一起来看看吧！

使用 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（但为兼容性仍建议显式写全）。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全打开</a>

• 不加 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，后者会生效，前者被忽略 —— 所以二者选一即可，不必叠用

真实项目里最容易被跳过的，是 CMS 后台富文本编辑器插入的外链、用户评论区的自动链接、以及第三方 SDK 注入的广告跳转 —— 这些地方往往没走统一链接构造逻辑，rel 属性最容易缺失。

以上就是《HTML5链接新窗口打开方法及设置》的详细内容，更多关于的资料请关注golang学习网公众号！