Using cloudflare with Firebase App Hosting

Website, Application, Performance DNS & Network
1

What is the name of the domain?

ourpixo.com

What is the error number?

301

What is the error message?

The page isn’t redirecting properly

What is the issue you’re encountering

I successfully set up a custom domain (*.ourpixo.com) in Firebase and added the required CNAME records in Cloudflare DNS, which initially worked as expected. However, I encountered an issue when attempting to proxy the CNAME records through Cloudflare: Firebase issued a warning about the proxied records. Despite ignoring the warning, Firebase removed the custom domain after three weeks, resulting in my users being unable to access my service! To avoid this issue in the future, I’m looking for a better solution that allows me to leverage Cloudflare’s features, such as DDoS protection, caching, and performance optimization, without relying on a custom domain in Firebase. Instead, I plan to use my Firebase projects’ default URL while still benefiting from Cloudflare’s capabilities. Any advice or recommendations on achieving this would be greatly appreciated.

What feature, service or problem is this related to?

DNS records

Screenshot of the error

Screenshot 2025-02-22 at 11.38.36.png
Screenshot 2025-02-22 at 11.38.36.png2880×1800 214 KB

2

I set up a wildcard domain (*.ourpixo.com) pointing to my Firebase project default URL. The goal is for requests to my wildcard domain to display the web page content from my Firebase project default URL. However, instead of loading the content, I’m encountering the error: The page isn’t redirecting properly.

I’ve already added a CNAME record in my DNS settings to redirect my wildcard domain to my Firebase project default URL, but it seems like there might be additional steps I’m missing to ensure the DNS configuration works correctly. Any guidance on resolving this issue would be greatly appreciated.

3

Steps to Reproduce the Issue

  1. Set Up Wildcard Domain:

    • Configure your wildcard domain URL in Cloudflare DNS to point to your project Firebase default URL.

  2. Add CNAME Record:

    • Add a CNAME record in your DNS settings to redirect your wildcard domain URL to your Firebase project default URL.

  3. Access the URL:

    • Open a browser and navigate to your wildcard domain URL.

  4. Observe the Result:

    • Instead of loading the content from your Firebase project default URL, the browser displays the error: The page isn’t redirecting properly.

Expected Behavior

  • Visiting your wildcard domain URL should display the web page content from your Firebase project default URL.

Actual Behavior

  • The browser shows an error: The page isn’t redirecting properly.
4

Check your SSL/TLS setting is set to “Full (strict)” in your dashboard here…
https://dash.cloudflare.com/?to=/:account/:zone/ssl-tls

6

@sjr Thanks for your response. I get this error after I switch to Full (strict)

Screenshot 2025-02-22 at 12.47.02
Screenshot 2025-02-22 at 12.47.022880×1629 321 KB

7

Make sure your origin SSL is in place and working. You can set the DNS record to “DNS only” to verify it works without Cloudflare before switching back to “Proxied”.

8

@sjr The origin SSL is in place and I removed the proxy but still same error page. I attached the firebase project URL showing the SSL (https)

Screenshot 2025-02-22 at 12.56.15
Screenshot 2025-02-22 at 12.56.151920×1200 81.2 KB

9

Have you set your domain pixomaticc.pixo.ng as a custom domain on Firebase and included it in the SSL certificate there?

I’m not getting an SSL handshake while your domain is “DNS only”. This will be why Cloudflare is giving a 525 error…

curl -ivv https://pixomaticc.pixo.ng/lj --insecure
* Host pixomaticc.pixo.ng:443 was resolved.
* IPv6: (none)
* IPv4: 35.219.200.116
*   Trying 35.219.200.116:443...
* Connected to pixomaticc.pixo.ng (35.219.200.116) port 443
* ALPN: curl offers h2,http/1.1
* (304) (OUT), TLS handshake, Client hello (1):
* LibreSSL/3.3.6: error:1404B410:SSL routines:ST_CONNECT:sslv3 alert handshake failure
* Closing connection
curl: (35) LibreSSL/3.3.6: error:1404B410:SSL routines:ST_CONNECT:sslv3 alert handshake failure
10

@sjr I get what you mean. But I don’t want to use Firebase custom domain because they would delete the custom domain after a while if you use Cloudflare proxy. This happened to my site this morning and I want to prevent that from happening in the future.

I want to point Cloudflare to the firebase project default URL instead. Do you get my explanation?

11

Do you want to redirect to the Firebase URL, or do you want to mask it behind the Cloudflare subdomain?

12

@sjr I want to mask behind the cloudflare domain, so my users would only see the cloudflare domain.

13

@sjr while still benefiting from cloudflare DDOS, Caching and other optimizations

14

Cloudflare doesn’t offer masking directly itself, but you can implement it yourself on Cloudflare.

My preferred way is (if you have a Pro/Business/Enterprise plan) use a Snippet, as they are unmetered, to do the proxying for you as here (just remove the path changing part)…

If on a free plan, a Worker can use the same code but you’ll have to watch the Workers free plan daily request limit, or the cost of requests on the Workers paid plan if your site is busy.

1 Like
15

@sjr That would be perfect!!! Thanks so much

I’m on the PRO plan so I’d try snippet right away!

Thanks again!!!

16

@sjr Oh, you mean I should use a worker! Thought snippet was a service

17

No, use a Snippet. See here for an intro…

1 Like
18

@sjr Oh, I see

Thanks for the guidance

19

I ran into a problem with snippet. The request URL has been changed to snippets-preview-worker.snippets.workers.dev

Is there a way to get the original URL e.g subdomain.domain.com, I need to use the subdomain on the URL rewrite

I’d really appreciate your help on this @sjr

20

Did you set the Snippet Rule (which is what triggers it)?

Press the “Snippet Rule” button and set Hostname equals pixomaticc.pixo.ng as the expression to trigger the Snippet on.

21

@sjr I’m yet to deploy the snippet, I’m testing it to ensure it works as expected.

In the snippet code, request.url has been changed, there also appears to be no headers.

I need to access the original URL passed in the browser so that I can extract the subdomain and use it in the code.

Do you get my explanation?