javascript 通过拦截并修改外链 dom 节点自动添加 rel="noopener noreferrer" 和 referrerpolicy="no-referrer" 等安全属性，结合 domcontentloaded 初始化与 mutationobserver 动态监听，支持跨域判断、重复防护、兼容性处理及可销毁的封装函数。
JavaScript 中为 DOM 节点的外链自动添加安全属性，核心是拦截并修改所有带 href 或 src 的外链元素（如 <a></a>、<link>、<iframe></iframe>），统一加上 rel="noopener noreferrer" 和 referrerpolicy="no-referrer" 等防护属性，防止反向劫持、信息泄露和新窗口钓鱼。
监听并处理已存在的外链节点
页面加载后遍历所有可能含外链的标签，判断是否为跨域链接，再动态补全安全属性：
-
识别外链：用
new URL(link.href).origin !== location.origin判断是否跨域 -
添加关键属性：
rel="noopener noreferrer"防止window.opener劫持；referrerpolicy="no-referrer"避免泄露来源路径 -
对 iframe 特别处理：除
rel外，还需设sandbox="allow-scripts allow-same-origin"（按需开放权限）
拦截动态插入的外链节点
使用 MutationObserver 监听 DOM 变化，确保后续 JS 动态生成的外链也被自动加固：
- 观察目标设为
document.body，配置{ childList: true, subtree: true } - 在回调中筛选新增的
<a></a>、<iframe></iframe>、<link>元素 - 对匹配到的节点执行与上一步相同的跨域判断和属性注入逻辑
避免重复添加与兼容性处理
防止多次运行脚本导致属性重复或冲突：
- 添加前先检查是否已有
rel属性，用rel.split(' ').includes('noopener')判断是否已存在关键值 - 合并已有
rel值，而非直接覆盖，例如：el.rel = `${el.rel} noopener noreferrer`.trim() - 对不支持
referrerpolicy的旧浏览器（如 IE），可跳过该属性，仅保留rel作为基础防护
封装成可复用的初始化函数
把上述逻辑打包为一个轻量函数，支持手动调用或自动执行：
- 提供
autoSecureLinks(options)接口，options支持传入自定义白名单域名、忽略选择器等 - 默认在
DOMContentLoaded时执行一次，再启动MutationObserver - 返回一个
destroy()方法，便于在 SPA 路由切换或测试时清理监听器
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
