firebase-js-sdk icon indicating copy to clipboard operation
firebase-js-sdk copied to clipboard

Cannot use https schemes with useEmulator

Open moifort opened this issue 5 years ago • 17 comments

Describe your environment

  • Operating System version: Mac OS Catalina 10.15.7
  • Browser version: Chrome Version 87.0.4280.67 (Build officiel) (x86_64)
  • Firebase SDK version: 8.0.1
  • Firebase Product: Functions

Describe the problem

When I use useEmulator I cannot use https event if I set a port at 443. But with deprecated useFunctionsEmulator I can use https

Steps to reproduce:

Code
useEmulator('blabla.com', 443)
Chrome console
index.esm.js?7dc7:490 POST http://blabla.com:443/my-project-id/europe-...

moifort avatar Nov 26 '20 14:11 moifort

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

google-oss-bot avatar Nov 26 '20 14:11 google-oss-bot

Right now it's designed to only work with http, but can you tell me more about your use case and why you would like to use https with useEmulator?

hsubox76 avatar Nov 30 '20 17:11 hsubox76

Hello @hsubox76 !

First I would like to thanks all the firebase team making this awesome product. Your services highly improve my code quality, increase my delivery time and help me to focus on my users values!

Since you introduce gradually your emulators (👍 for the new auth emulator, I can't wait to see Storage emulator), I improve my CI pipeline and my tests (end-to-end, integration, unit).

I work with git feature branching strategy (one feature, one branch), and every time I create a new branch my CI trigger automatically all tests using an specific docker image and run all the infrastructure from firestore to functions and hosting with my (production bundle SPA). For this part it's not a problem because I use only localhost url for all the emulators.

But recently you add auth emulator and I decided to push further my CI. Now (with the deprecated method), I create a full environment containing all the code of my branch un deploy on docker swarm using Traefik as a reverse proxy (with letsencrypt integration for automatic ssl generation). When I finish my work on the feature I send a specific url like https://mybranchname.myawesomefrebaseproject.com and my client/PO/QA can validate and make feedbacks on my feature. My idea here is to create the closest environment from the firebase production, and for me https is very important because I encounter to many issues in production because of SSL, by using https very early in my development process it help me to fix and validate all the issues before delivering to production.

Before, I use a specific firebase projet as staging, but it's too difficult to maintain with configuration and everything. But with your emulators, testing/validating are easier than ever 😄 !

I hope you understand why is important for me, and I think developers will need this option.

I success to create the environment using only deprecated functions. I have other issues like:

  • Firebase JS SDK do not authorize other than localhost url (even if I set url for auth emulator) when redirect
  • Firebase emulators UI is not working because it try to access data (functions logs, Firestone data etc) in localhost.

moifort avatar Dec 02 '20 10:12 moifort

@moifort thank you for sharing your use case! It definitely makes sense and we love to see developers pushing the emulators as far as they can go.

I'll circulate this to the team and see if it changes any minds about accepting https in useEmulator. If it does change our mind though expect this to take a while, since we'd have to make a change in all of the product SDKs on all platforms 🙃

samtstern avatar Dec 02 '20 17:12 samtstern

@sandersn thanks for your quick answer. It's very valuable, for me, to see that you listen and take care about us (developer). Don't worry, I understand, is not an easy task and maybe is not a priority now! I hope that my post will convince the team!

Thanks a lot!

moifort avatar Dec 02 '20 19:12 moifort

@moifort Thanks for the detailed explanation of your use case here. As a tl;dr, for your specific use case (setting up a preview environment for client/PO/QA), we recommend using real separate Firebase projects (sometimes called "staging / QA projects").

A real project gives you the full benefit of closely matching production behavior (stated as one of your goals) without the hassle of setting up the emulators and reverse proxies. We appreciate your attempt to push the limits of emulators but I'd also like to remind you that testing with emulators won't be sufficient for QA purposes -- for example, you cannot catch errors like missing an index in Firestore Emulator (because the Firestore Emulator does NOT require creating indexes in advance). As another example, Cloud Functions execute really fast in the Functions Emulator but you may still want to test with real function triggers to make sure your app accommodates code starts (and potential concurrency issues). Emulated SSL through Traefik and emulators is also very different from production, as you may expect.

At Firebase, we have to balance among many different goals and for the Emulator Suite, we've made our mind to focus on making it easier to develop, test, and iterate on the app, instead of being a full emulation of production. When given choices, we lean on simpler implementations that provide more help or insights, which may deviate from production. Self-hosted Firebase is an explicit non-goal for us for 1) the reasons above, and 2) we believe a staging project is the way to go.

And just to make sure I'm clear here -- we're still considering whether to add https support with useEmulator, for reasons like consistency with functions emulator etc., but we consider "hosting a QA environment closer to production" neither a reason for or against it since it's not part of the bigger goal. I've created b/175034902 to track the feature request internally and we'll get back to you if we decide to move forward.

yuchenshi avatar Dec 07 '20 18:12 yuchenshi

Just chiming in with my use case being the need to integrate with Apple/Google Pay from inside a web application where those are only available behind https, which we can get away via tunnelling. i.e: ngrok. The problem is then the mixed content error with emulator endpoints being blocked since it's being requested from a https environment but served only through http.

zanona avatar Jan 06 '21 14:01 zanona

As I said mentioned in #5648, it used to be possible to set the full host allowing us to support https urls. This broke, from what I can see, since changes made in #3906.

export function useFunctionsEmulator(
  functionsInstance: FunctionsService,
--  origin: string
  host: string,
  port: number
): void {
--  functionsInstance.emulatorOrigin = origin;
++  functionsInstance.emulatorOrigin = `http://${host}:${port}`;
}

We rely on this for our dev environment to run behind https proxies, for the same reasons as mentioned above, to keep dev and staging as close as possible to our prod environment.

BobbieGoede avatar Dec 20 '21 17:12 BobbieGoede

Similar use case to the above. We offer developers ephemeral review environments which are basically disposable kubernetes namespaces. We run the emulator in the namespace next to other backend services, and it is all fronted by an HTTPS only ingress.

bberzinskas-tw avatar May 13 '22 14:05 bberzinskas-tw

One more use case:

I'm coding in the cloud with GitPod on a Chromebook. So no local environment but an environment behind a reverse proxy. The emulator is made available on a generated hostname like 5001-WORKSPACE_ID.gitpod.io. All endpoints are SSL encrypted and no simple http endpoints are available.

When I use connectFunctionsEmulator and httpsCallable, the function is called via http without encryption. So there is no option to use the emulator in my cloud IDE any more with my webapp.

davemecha avatar May 14 '22 16:05 davemecha

I'm planning to migrate my development env to GitHub Codespaces. And I faced the same issue. The local emulator will port forward at Cloud IDE, and it needs HTTPS invocation.

gentksb avatar Jun 17 '22 00:06 gentksb

My team and I are also facing the same issue as @gentksb.

jdcoldsmith avatar Oct 19 '22 18:10 jdcoldsmith

echoing the sentiments above. Developing in GitHub's Codespaces and need it to be https

DylanClayton avatar Dec 11 '22 00:12 DylanClayton

Also running into issues wanting to tunnel over ngrok but requests to the firebase emulators are blocked as mixed content.

aaron-coalesce avatar Dec 13 '22 00:12 aaron-coalesce

I really also need this! Our dev environments are https and we need the emulator firestore and functions to work over https as well.

I was able to work around this for now by proxying the requests and using the deprecated useFunctionsEmulator() for functions and manually setting the Firestore instance settings (host and ssl flag), but it would be much nicer if it worked without all that extra trouble.

technatelogy avatar Jan 30 '23 20:01 technatelogy

I have a similar issue when using Gitpod and the firebase emulator with auth and storage.

crivera avatar Feb 28 '23 17:02 crivera

FYI: this also makes it impossible to use GitHub Codespaces with firebase emulators (Codespaces port-forwards traffic to a custom hostname but is always served over HTTPS on port 443).

https://docs.github.com/en/codespaces/developing-in-a-codespace/forwarding-ports-in-your-codespace

psigen avatar Mar 03 '24 02:03 psigen