Windows部署Firebase项目遇Google登录非法iframe URL错误

Firebase项目集成Google登录按钮后，Mac环境部署功能正常，但Windows机器部署后，点击登录按钮出现以下错误：

2.b95cb065.chunk.js:2 Uncaught Error: Illegal url for new iframe - https://***.firebaseapp.com%0D/__/auth/iframe?apiKey=***%0D&appName=%5BDEFAULT%5D-firebaseui-temp&v=8.2.5&fw=FirebaseUI-web&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fabc-static%2F_%2Fjs%2Fk%3Dgapi.lb.en.ydLROSGdlBE.O%2Fd%3D1%2Frs%3DAHpOoo_OUY4V-VcsLuRVnUuYVO758FydkA%2Fm%3D__features__#id=I0_1671205169815&_gfid=I0_1671205169815&parent=https%3A%2F%2F***.firebaseapp.com&pfname=&rpctoken=40576440
    at _.Vk (cb=gapi.loaded_0?le=scs:148:96)
    at yl (cb=gapi.loaded_0?le=scs:158:18)
    at _.zl (cb=gapi.loaded_0?le=scs:159:26)
    at _.Gl (cb=gapi.loaded_0?le=scs:165:147)
    at _.Wm.openChild (cb=gapi.loaded_0?le=scs:268:378)
    at _.Wm.open (cb=gapi.loaded_0?le=scs:273:12)
    at 2.b95cb065.chunk.js:2:921890
    at new Et (2.b95cb065.chunk.js:2:849923)
    at 2.b95cb065.chunk.js:2:921836
    at Dt.i.a.i.g (2.b95cb065.chunk.js:2:851228)

Firebase初始化代码 #

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_FIREBASE_APPID,
};

if (process.env.NODE_ENV === "development") {
  console.log(firebaseConfig);
}

export const app = firebase.initializeApp(firebaseConfig);

(async () => {
  await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
})();

export default firebase;

环境变量配置 #

REACT_APP_FIREBASE_APIKEY=***
REACT_APP_FIREBASE_AUTHDOMAIN=***.firebaseapp.com
REACT_APP_FIREBASE_DATABASEURL=
REACT_APP_FIREBASE_PROJECTID=***
REACT_APP_FIREBASE_STORAGEBUCKET=***.appspot.com
REACT_APP_FIREBASE_MESSAGINGSENDERID=***
REACT_APP_FIREBASE_APPID=***
REACT_APP_ENV=development

注：URL未加引号、无逗号，且不以https://开头

原因分析 #

错误URL中的%0D是Windows系统的回车符（CR），说明Windows环境下读取环境变量时，apiKey和authDomain字段被注入了多余的回车符，导致生成的iframe URL非法。

解决方法 #

• 检查Windows下的.env文件，确保每一行末尾没有多余的空格或换行符，重点检查REACT_APP_FIREBASE_APIKEY和REACT_APP_FIREBASE_AUTHDOMAIN
• 在读取环境变量时手动去除空白字符，修改初始化代码如下：

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY?.trim(),
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN?.trim(),
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID?.trim(),
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET?.trim(),
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID?.trim(),
  appId: process.env.REACT_APP_FIREBASE_APPID?.trim(),
};

• 避免用Windows记事本编辑.env文件，改用VS Code等编辑器，设置文件换行符为LF（而非CRLF）

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