Hi Everyone -
I’ve been spending a lot of time lately trying to put Cloudflare in front of Bubble for Threat Detection and think I have a working approach, but would love any feedback or improvements from the people on this site. There are a few good articles on this already (I learned a ton from @chris95), but I wanted to try to create a step-by-step guide.
Quick context: Our app is sold to Enterprise customers. They require compliance certs like SOC 2, GDPR, etc. While Bubble already provides a very compliant infrastructure, app-level compliance requires that we can do things like our own threat detection, We cannot rely on things like Workload Spike Alerts from Bubble. We must have direct access, alerts, remediation, etc. In my view, if we cannot get a valid setup like this (outside of the much more expensive Enterprise Plan), Bubble is not viable as an Enterprise App platform. I believe in Bubble and want to make sure this works.. well! Hoping you can help me improve it!
So, this is the process we are following:
- Set Bubble Domain to www.mysite.com - this is critical! In the Domain & Email section of settings, use the full www.mysite.com and not just mysite.com. We need this so we can forward the URL without the www to the www through a DNS CNAME record
- Enter all DNS records from Bubble into Cloudflare, NOT proxied - I got 4 DNS records with an @ and 4 with www. I entered all of them into the Cloudflare DNS the same as any other DNS site… however, Cloudflare will default to hiding them behind proxies (they call it Orange Cloud). This will not work so you need to make sure every entry is NOT proxied (Gray Cloud).
- Validate the domain in Bubble - Go back to the Bubble Domain and Email settings and click validate. It should find the DNS records and tell you that you are set up correctly. This is probably the last time Bubble will be happy with you.. but your customers will still be happy!
- Go back to Cloudflare and edit the DNS entries as follows:
- delete all A records (both apex / @ and www)
- create a single CNAME record called www that points to app.bubble.io: (www → app.bubble.io). Two notes, this is “app.bubble.io” not “myappname.bubble.io”.. Bubble seems to be able to sort out where your app is from the headers that were validated (someone better than me can provided a clearer explanation). Also, be sure that this entry IS PROXIED (on Orange Cloud)
- create a single A record (@ → 198.51.100.1 or some non-routable dummy IP). This record IS Proxied. This was an odd step to figure out. In the next step, we want mysite.com to redirect to www.mysite.com. However, for the Name Servers to know what to do with mysite.com, it has to point to something. So we pointed it to one of these dummy testing IPs. No traffic will ever go there, because we will create a redirect rule that intercepts it. But you need a DNS record for it.
- Create a Redirect rule - In cloudflare click on Rules → Overview → Redirect Rules and set up a wildcard rule that forwards (http*://mysite.com/* → https://www.mysite.com/${2})– bunch of notes here! The first part of the rule needs both of the asterisks. The first (asterisk 1) makes both http and https forward. The second (asterisk 2) picks up any path after mysite.com and forward them. Since we want to include “asterisk 2” in the forward, we have to note it as ${2}. That might be obvious to many of you, but I wasted at least an hour trying to figure out why it wasn’t working with ${1}. You also want to click the “Preserve query string” below.
At this point, your setup should be working. You can test it by creating a security rule in cloudflare (for example, set up something like “if URL contains /_my_bubble_test then Block”). you should then be able to type mysite.com/_my_bubble_test and get a cloudflare blocking screen.
Now that it works, here are the gotchas:
- Reconnect your email system in Bubble - going back to Settings → Domain and Email, you may have to reconnect your email with the new DNS. You’ll want to do this pretty soon after you get the setup because of #2
- Bubble will alert you to the configuration - Bubble will ultimately recognize that it is getting traffic from a proxied cloudflare IP and not a standard DNS IP and tell you that your setup is wrong in the Settings –> Domain and Email tab. Your settings are not wrong! (At least I don’t think so) They will continue to work, they are just non-standard. This is the #1 issue I would love for Bubble to address. Please recognize this configuration as valid!! However, when this happens, you won’t be able to see your email settings to reconnect, hence I recommend you do this quickly.
- Reconnect all APIs / Webhooks, etc - Our initial settings were all validated to mysite.com. And we now moved everything to www.mysite.com. This caused a lot of stuff to fail. Once we went back and changed all the APIs and webhooks to www.mysite.com, everything was fine.
- Your logged in Users will have issues - Anyone with a current active cookie will be stuck in limbo. They have a cookie connected to the original servers and you are now on new DNS servers. This creates the famous “can’t log out” loop. We tried to write some scripts to clear the cache or to logout all users, but basically failed and ended up apologizing and telling people how to delete their mysite.com cookies. (If any Forum users know how to do this better, we’d love to know).
That’s where we have ended up. Everything works and we have added a layer of security in front of Bubble’s. Bubble still has Cloudflare running for the infrastructure, but we now have ownership of real-time app level security.
Recommendations, improvements, corrections all welcome. Hope this (long) note saves someone at least a little time! Happy Bubbling!