重写HTMLAnchorElement href setter是否安全？技术方案风险问询

你的POC方案确实能跨框架生效，但存在几个关键问题，足以成为阻止你采用它的理由：

• 重复追加参数导致URL失效：如果锚点本身已有query参数，或者后续代码再次修改href，你的逻辑会直接在末尾拼接?referrer=xxx，导致出现?a=1?referrer=xxx或&referrer=xxx&referrer=xxx这类非法URL，目标页面无法正确解析参数。
• 破坏特殊场景的原生功能：
  • 当锚点是内部跳转（如#footer）、伪协议链接（如javascript:void(0)）、或者mailto/tel这类功能性链接时，追加参数会直接破坏原有行为，比如点击内部锚点会跳转到带参数的错误地址，伪协议代码无法执行。
  • 第三方脚本（如广告、统计脚本）如果直接操作锚点href，你的重写逻辑会干扰这些脚本的正常工作，引发难以排查的兼容性bug。
• 调试与维护成本极高：这种修改原生原型的方式属于“暗箱操作”，其他开发人员调试URL相关问题时，很难快速定位到href被修改的原因；后续如果要调整referrer规则，也需要全局排查，维护难度大。
• 潜在的浏览器兼容性与安全风险：虽然现代浏览器普遍支持修改原生原型，但旧版浏览器、部分隐私模式下可能存在行为差异；而且这种修改原生API的方式，未来可能和浏览器的安全机制或API更新产生冲突。

更优的替代方案：事件委托 #

不需要给每个锚点单独绑定点击事件，用事件委托只绑定一次就能覆盖所有锚点，实现成本低且可控：

document.addEventListener('click', (e) => {
  const anchor = e.target.closest('a');
  if (!anchor) return;

  // 过滤不需要处理的链接类型
  const url = new URL(anchor.href);
  if (url.protocol === 'javascript:' || url.protocol === 'mailto:' || url.protocol === 'tel:' || url.hash && url.pathname === location.pathname) {
    return;
  }

  // 避免重复添加参数
  if (!url.searchParams.has('referrer')) {
    url.searchParams.set('referrer', 'https://example.com');
    anchor.href = url.toString();
  }
});

这种方式的优势：

• 只处理实际被点击的锚点，不会干扰未触发点击的锚点属性
• 用URL API正确处理参数，避免格式错误
• 可灵活过滤特殊链接，保留原生功能
• 逻辑显式，调试和维护都更简单

内容的提问来源于stack exchange，提问作者Sha