如何用HTML代码给外部链接统一添加安全属性-html教程-PHP中文网

必须配 rel="noopener noreferrer" 是为防止新页面通过 window.opener 控制原页面并泄露 referer 信息；仅加 noopener 可防劫持，加上 noreferrer 还可防来源泄露，两者共存最稳妥。

如何用html代码给外部链接统一添加安全属性

为什么 `target="_blank"` 必须配 `rel="noopener noreferrer"`

不加 rel 属性时，点击外部链接打开新标签页，新页面可通过 window.opener 完全控制原页面（包括跳转、修改 DOM、窃取敏感数据）。这是真实存在的安全漏洞，Chrome、Firefox 都已明确警告。哪怕你只用 rel="noopener"，也比什么都不加强；但加上 noreferrer 还能阻止 Referer 泄露，更稳妥。

如何批量给已有 `<a></a>` 标签补上安全属性

手动改每个链接容易漏，推荐用脚本一次性处理。注意：必须确保目标是外部链接（协议为 http:// 或 https:// 且域名不同），否则加了反而可能影响内部跳转逻辑。

用 JavaScript 扫描所有 <a href></a>，判断是否为跨域链接：

document.querySelectorAll('a[href]').forEach(a => {
  const url = new URL(a.href, location.href);
  if (url.origin !== location.origin && a.target === '_blank') {
    a.rel = (a.rel ? a.rel + ' ' : '') + 'noopener noreferrer';
  }
});

如果使用构建工具（如 Vite、Webpack），可在 HTML 插件中注入逻辑，或用 PostHTML 等工具做构建时自动修正
服务端渲染项目（如 Next.js、Nuxt）应在组件层面统一封装 <link> 或 <externallink></externallink> 组件，强制带安全属性

`rel="noopener"` 和 `rel="noreferrer"` 能不能只选一个？

可以，但不推荐省略任何一个：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

noopener 解决 window.opener 安全问题，是底线
noreferrer 额外屏蔽 Referer 头，防止来源信息泄露（比如用户从带 token 的 URL 进来）
两者共存无冲突，浏览器兼容性都很好（IE 不支持 noopener，但 IE 已淘汰；现代项目无需考虑）
不要写成 rel="noopenner" 或漏掉 o——拼错就完全失效

Markdown 或 CMS 里怎么保证生成的链接自带安全属性？

多数静态站点生成器（Hugo、Jekyll）和富文本编辑器（TinyMCE、CKEditor）默认不加 rel。得靠配置或插件干预：

Hugo：在 config.toml 中启用 goldmark.renderer.unsafe = true 后，用自定义 render hook 拦截 a 标签并注入 rel
Typora / Obsidian：无法自动加，导出 HTML 前需用正则替换：href="(https?://[^"]+)" target="_blank" → href="$1" target="_blank" rel="noopener noreferrer"
WordPress：用 wp_target_blank 类似插件，或在主题 functions.php 中 hook the_content 过滤器