Chrome 浏览器升级至 115 版本后，部分网站的 reCAPTCHA 组件因 User-Agent 相关 API 调用被限制而加载失败（Network 显示 (canceled)），根本原因在于 Chrome 对 navigator.userAgent 等遗留接口的严格限制。
chrome 浏览器升级至 115 版本后，部分网站的 recaptcha 组件因 user-agent 相关 api 调用被限制而加载失败（network 显示 `(canceled)`），根本原因在于 chrome 对 `navigator.useragent` 等遗留接口的严格限制。
自 Chrome 101 起，Google 开始逐步限制对 navigator.userAgent、navigator.appVersion 和 navigator.platform 的访问；至 Chrome 115，该策略进一步强化——当页面或第三方脚本（如旧版 reCAPTCHA v2/v3 加载器）尝试读取这些属性时，Chrome 会静默拦截后续网络请求（如 reCAPTCHA 的 JS 资源加载），导致 Network 面板中对应请求状态显示为 (canceled)，且无明确错误日志。这正是问题仅在 Chrome ≥115 复现、而其他浏览器及低版本 Chrome 正常的根本原因。
根本原因：reCAPTCHA SDK 的兼容性缺陷
官方 reCAPTCHA（尤其是较老的嵌入方式，如未指定 render=explicit 或使用已弃用的 onload 回调）内部可能依赖 navigator.userAgent 进行客户端环境探测（例如判断是否为移动设备、是否支持 WebAssembly 等）。Chrome 115 将此类访问视为“高风险遗产 API 使用”，触发 User-Agent Reduction（UA Reduction）策略，进而阻断其后续关键资源请求（如 https://www.google.com/recaptcha/api.js 的子资源或令牌获取接口）。
✅ 推荐解决方案（三步落地）
1. 升级至最新 reCAPTCHA 实现方式
优先采用 Google 官方推荐的现代集成方式，避免隐式依赖 UA 字符串：
<!-- ✅ 推荐：显式初始化 + async defer + data-sitekey -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY" async defer></script>
<script>
// 确保 DOM 加载完成后再初始化
document.addEventListener('DOMContentLoaded', () => {
if (typeof grecaptcha !== 'undefined') {
grecaptcha.ready(() => {
// 可选：预获取 token（v3）
grecaptcha.execute('YOUR_SITE_KEY', { action: 'homepage' })
.then(token => console.log('v3 token:', token));
});
}
});
</script>⚠️ 注意：移除任何手动读取 navigator.userAgent 的自定义逻辑（包括第三方分析脚本、A/B 测试工具等），统一改用 navigator.userAgentData（需启用 Permissions Policy）或特性检测（如 if ('serviceWorker' in navigator)）。
2. 添加 Permissions Policy 声明（关键补充）
在 <head> 中显式声明允许 UA 数据访问（仅当必须使用 userAgentData 时），同时禁止旧接口：
<meta http-equiv="Permissions-Policy" content=" interest-cohort=(), user-agent-redaction=() "> <!-- 若需使用 navigator.userAgentData，请替换为：user-agent-redaction=(self) -->
更稳妥的做法是完全禁用 UA 访问，迫使所有代码转向现代替代方案。
3. 检查并清理第三方脚本干扰
运行以下代码快速定位违规脚本：
// 在开发者工具 Console 中执行，监控首次 UA 访问
const originalUA = Object.getOwnPropertyDescriptor(navigator, 'userAgent');
Object.defineProperty(navigator, 'userAgent', {
get() {
console.warn('[UA ACCESS DETECTED]', new Error().stack);
return originalUA.get.call(navigator);
}
});常见“罪魁祸首”包括：老旧的统计 SDK（如某些版本的 Hotjar、FullStory）、自定义设备检测库、未更新的 CMS 插件等。逐一排查并升级至支持 userAgentData 的版本。
? 总结与注意事项
- 不要尝试通过 CORS、Referrer-Policy 或 COOP 头修复：该问题是浏览器内核级策略拦截，服务端响应头无效；
- access-control-allow-origin 等设置无法解决 (canceled) 状态：此状态表示请求甚至未发出，而非跨域拒绝；
- 降级 Chrome 不是长期方案：Chrome 115+ 已全面启用该策略，未来所有 Chromium 内核浏览器（Edge、Opera 等）将同步；
- 验证方式：打开 DevTools → Application → Clear storage → 勾选 “Cache” 和 “Service Workers”，彻底刷新后观察 Network 是否仍出现 (canceled)。
遵循以上方案，99% 的 reCAPTCHA 加载失败问题可在 1 小时内定位并修复。核心原则始终是：拥抱特性检测，告别 UA 字符串解析。
