React应用Google登录遇双错误：CSP内联脚本限制与idpiframe初始化失败

一、Google登录初始化错误（idpiframe_initialization_failed） #

控制台提示client ID undefined是核心问题，优先解决：

• 修正环境变量命名规则：如果用Create React App，环境变量必须以REACT_APP_开头，把SHARE_US_GOOGLE_AUTH_TOKEN改成REACT_APP_SHARE_US_GOOGLE_AUTH_TOKEN，代码同步调整为process.env.REACT_APP_SHARE_US_GOOGLE_AUTH_TOKEN；用Vite的话前缀改为VITE_，按框架规则调整即可。
• 验证.env文件配置：确保项目根目录的.env文件里正确写入变量，格式为REACT_APP_SHARE_US_GOOGLE_AUTH_TOKEN=你的Google客户端ID，不要给ID加引号，写完后重启开发服务器，环境变量才会生效。
• 二次核对Google Cloud控制台配置：确认对应客户端ID的「授权JavaScript来源」里确实存在http://localhost:3000，注意协议（http/https）、端口号必须和本地开发地址完全一致，不能有多余空格或斜杠。

二、Content Security Policy（CSP）错误 #

该错误是页面CSP规则阻止了Google登录相关资源加载：

• 添加CSP规则允许Google相关源：在public/index.html的<head>中添加meta标签，配置必要的CSP规则：

  <meta http-equiv="Content-Security-Policy" content="
    script-src 'self' 'unsafe-inline' https://accounts.google.com https://apis.google.com;
    style-src 'self' 'unsafe-inline';
    frame-src https://accounts.google.com;
  ">
  

  开发环境用unsafe-inline临时解决即可，生产环境可替换为nonce或hash提升安全性。
• 排查浏览器扩展干扰：控制台中的moz-extension提示大概率来自隐私/广告拦截类浏览器扩展，尝试禁用所有扩展后刷新页面，看是否能消除该错误。

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