SSL Certs, Approvals and Cloudflare

Monday. Monday. Monday.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming again hot. Here is Wes Barracuda Boss and Scott

CSD. Welcome to Syntax. In this Monday, hasty treat.

It. We're gonna be talking about SSL certificates, approvals, and Cloudflare. Basically, we have a lot of components now on the web, and we also have a lot of free generated SSL certificates as well as paid SSL certificates. So what is the process here of utilizing tools like Cloudflare with these SSL certificates? What are we doing here? There's so much complex stuff going on, and many of it just kind of happens automatically for you. So my name is Scott Skolinski. I'm a developer from Denver, Colorado. And with me as always is Wes Boss.

Hey, everybody.

Hey.

Hey, Wes.

This episode is sponsored by 2 amazing companies, Prismic and LogRocket.

It. LogRocket is the perfect place to see all of your exceptions and errors happen in a scribble video replay, and it's also the the perfect place to really get an understanding about it. Your user's behavior because they now have all sorts of behavior tracking and things like that where you can see heat maps.

You can also see errors and bugs. Basically, if your users on your site are utilizing your website and you want to understand what are their pinpoints, what are their their it. Nice things that are happening with the users.

Where are they engaging with, and when are they hitting roadblocks? You're gonna want a tool like a LogRocket because it gives you a video replay. That's right.

You get all the things that you would love to see when you're debugging issues like the network requests and error logs and more. So check it out at logrocket.comforward/syntax.

Sign up, and you'll get 14 days for free modern front end monitoring and product analytics. We are also sponsored by Prismic

at Prismic Dot io.

They are the headless CMS. We developers call them. They say they make your website editable for the entire team. So the way that Prismic works is you sign up. You immediately are able to start creating your project data types. So you can create people and movies and podcasts, and then you can relate those data types to each other, all without writing a single line of code.

And then out the other end, You get 2 things. 1, you get a whole UI for being able to create your pages. It's kind of like a little site builder because you can click all these data types together in 2 pages, and then you, the developer, get either a GraphQL or REST API, which you can query For your pages and all your data types and all the relation, and then you just start looping over the data and put it into your Next. Js, your Gatsby, Nuxt, anything that is able to consume an API, which is literally everything. So check it out at prismic.

Iosyntax.

They have a really good landing page there. It's really funny, and they have lots of good good examples of, like, starters that you can you can use there with React or Vue or you name it. So thank you, Prismic, for sponsoring. All right. So let's talk about SSL certificates, approvals, and Cloudflare and how this all works.

I went Through recently, I'll tell the story.

So I am doing a bunch of updates to my course platform. And Part of that is I want to move my hosting over to render. That's the same same place Scott does. And Why render? Because they have the whole continuous integration. You can run build steps every time you have a git commit, but they also do it with Node. Js, which is, not a lot of the like like, you think, like, oh, why not put it on Vercel? They don't support Regular node applications. They are only serverless. And my my course platform is not serverless. It's it's a regular node app. That's the same with yours too. Right, Scott? Correct. So, I was moving it over and I said, okay. Like, I'm going to, You get you add the domain names and they generate a SSL certificate, but it wasn't working with Cloudflare.

And you'll know I'm a big fan of Cloudflare myself, And I actually use pieces of Cloudflare as part of my application.

Most notably, the Cloudflare has a country header for and I use that country header to detect which country you're coming from, and then I offer up discounts for some countries that, don't have the purchasing power.

Can I So ask a question? Yeah. What what exactly was not working when you say it wasn't working? Like So What what what happened?

When when you add a domain name to, to render, it will immediately try to it does 2 things. At first, it tries to figure out that you own the domain name because and they do that because you've pointed it at their servers.

And then also, once it's done that, it will generate an SSL certificate for you.

And neither of those were working because I was running Cloudflare. We'll talk about what that is in just a SEC.

So let's talk about how let's encrypt works. Let's talk about how Cloudflare works, and then let's talk about the problem and how you how you solve it. So I think this is kind of interesting. Yeah. If you're, like, unsure CSSL domains.

They're kind of a blurry area for a lot of devs. And, you kind of just set it up and cross your fingers and hope it doesn't work. And I've been in that camp for a while, and unfortunately, I had to go this week. I had to go down the rabbit hole of figuring out how does this all of this stuff actually work. And It's good because now I have, like, I have much more confidence in understanding how this all works. So Let's Encrypt is a free SSL generation.

Anyone can get SSL for any domain name. And when you want an SSL certificate For your website, they have to first prove that you own that domain name, and these are called challenges.

So when you say, okay, scott.com.

I want a certificate for scott.com. And lots of people say, okay. Sure. It's free, but You have to prove to me that you own that, and there's 2 ways to prove that you actually own a domain name. 1st, you it's called the HTTP challenge, Which means that it says just put this file on your server at this specific URL, and we'll check if it's there. And if you put that If you put that there, we'll say, all right, you must you must have access to the server and this domain name because you put You actually put it there. Right? Yeah. And then the second way is if you don't have access to that domain name or and this is this is a question I always had is, how How do you set up an SSL certificate before you switch over the domain name? Mhmm. Right? Like, if you if you're moving servers and you have a high traffic website and you're going to cut over your domain name.

How do you generate the SSL certificate before you cut over? Because you don't want to have that, like, 1 or 2 minutes of

downtime where you don't have SSL certificates. Everyone will freak out. Yeah. Because it will say that this site is not secure, and you'll get all these people who don't, you know, necessarily know what that message means and saying, oh, no. This site's gonna steal all my stuff. Exactly. And the answer That is is a DNS challenge where you can set a I believe it's a text record

on your domain name. It's kind of a little piece of metadata you put in your DNS of your domain And they'll give you a token and you put it in there and I'll say, I will check for that token. Oh, you put it there. Okay. You must own this domain name. You put it there. We told you to and you did. So okay. Either one of those, now you own it. Right? What about the ice bucket challenge? Remember this? Sorry.

Yeah. Remember that? The ice bucket challenge from, like, pre COVID times, like, 200 years ago? Oh, yeah. That was a good good did you ever do the ice bucket I did. Yeah. I did. I did do the ice bucket challenge. Yeah. I got called out on it, by my, sister-in-law, so we did it on our deck. Yeah. Oh, man. That was that was back in the day when everybody was on Facebook and just posting stuff. That's good. Yep. Yeah. Posted that on Facebook. That's where we did it.

So that's how let's encrypt works.

And then there is Cloudflare, which is like, what is Cloudflare? Cloudflare is a service That offers many, many things, probably the most popular being DDoS protection. They're they're very good at detecting who malicious actors and bots are and blocking them.

They provide you caching, which is really good if you want to save money on bandwidth. They give you really good stats, which is nice because if you don't want to run, A lot of people block stats. Like, most of my visitors to my website run blockers, and they don't they block Google Analytics, which is good, But I still need a little bit of stats to understand how many people are going to it. It also blocks error and exception tracking. So,

if if y'all are Have your ad blocker on level up tutorials. Please turn it off because we do not have we don't have ads. We're we're not gonna track you, but we do want to see your errors and exceptions. Yeah. That's for sure.

Yeah. That's true.

It gives you country headers, which I said I use, page rules, which is really nice. You can you can do, like, specific URLs. You can turn SSL off. You can block certain countries. You can block certain, ASN, like certain ISPs if you need to. If anything is happening, you need to quickly jump in.

Or at the very, very basic, if you want to say go to westboss.comforward/, donkey, And you don't have the infrastructure in place to create that custom URL because of whatever crazy, CMS you're using, you could you could just put that in your CloudFlare, and that will happen at a CloudFlare level, and you can do redirects and whatnot. So Cloudflare is awesome. They do a lot more than that. I'm a big fan of it. And the way that Cloudflare does all of this stuff Is that they proxy your website, meaning that they essentially are another server that sits between your traffic and your actual server, And they intercept literally everything.

And then they will do caching and redirects and DDoS protection and SSL certificates and all that stuff that we just talked Right? They proxy your entire application. So the problem that I ran into, and this is I run into this often, is that these pass platform as a service, They don't like when you use Cloudflare. Do you want the the floating IP thing is a big big part of that, right, where they don't have A static IP assigned to them. The IP is, like, kind of changing all the time. Yeah.

That's one of the issues is that if your IP is constantly changing or they don't have a load balancer that is your your one IP address.

There are ways around that where you can you can set up a top level c name. It's called was it c name flattening, where you can just you can you can point out a domain instead of an IP address, which is It's just a solution.

They they claim there's performance issues, which is valid. Like, Vercel is one of them. They are performance heavy, And they say, like, no, we've got it figured out. Don't put anything between your user and us. We're going to figure out where the servers go. We're going to figure out How to what to cache, how to get it to them the fastest. And then if you put this big orange cloud, it'd be to fooling us and your user Big orange cloud. You know, like, oh, hey, guys. Then that's frustrating for them. So, like, that's a valid concern. Right? Like, if, if your service has already figured out a lot of the stuff that CloudFlare does, That is unnecessary.

Right? The other one is that they don't get the money from the bandwidth.

So one dirty little secret is you can put Cloudflare in front of services that charge you for bandwidth, and Cloudflare will cache them. I wrote a little Cloudflare worker that went in front of Cloudinary, And Cloudinary is is kind of expensive if you go over the bandwidth limit. So, you can offload Much of your bandwidth to Cloudflare and is very, very cheap or free in my case, if you don't hit the certain limits, which is great. What else? Support is really tricky. So, like, like, you go to let's say you go to DigitalOcean or Vercel or or render and be like, hey, guys, the website is broken. And it's like, no, our website is working fine.

Or like, I updated my WordPress, and it's not showing on the website. Like, why are you doing that? Like, support is very, very tricky when there is a

intermediary that is trying to do more stuff in the middle. You don't necessarily know what that is. You don't you don't have insights into it. So Yeah. When there's enough it. Fences in between something or pathways in between something. It it it also gives people an excuse to say, like, Not my fault. You have all this other stuff going on. It could be anything else's fault. And that I mean, it is valid because, you know, You never know where where the breaking point is. Is it how the things are connected, or is it one thing in the middle that's broken? Is there, like, is there a connection in between it. Somewhere that's going wrong, or is it something that is incompatible with something else somewhere down the road? Yeah. Definitely makes it more tricky. More variables there. Exactly. So I'm in this, like, spot where I want Cloudflare because I like all the services, but I also want the niceness of using a platform as a service that Generates my builds.

You can roll back. It cuts over to live deploys, nice logging, all those things without having SSH into a server and run that all yourself. Right? So, like, I kind of want to have my cake and eat it too.

So there was that problem with render.

And then I also CloudApp is another one. This is not a hosting provider, but CloudApp is like a, like a screenshot URL sharing tool, and I've used that for probably 12 years. And, I don't know, about a year ago, they changed it and they revoked A whole bunch of features, specifically direct image embeds, URL redirects. They just remove them entirely from the platform because They're being abused or they cost too much bandwidth. So what I did is I'm I wrote a little CloudFlare worker that sat in front of my cloud app and just, like, I just coded those features back in Because you can that's video. This is such a West thing. This is very West. This is peak West. Yeah. That's beautiful because you have a hosted service.

But If there's something you don't like about the host of service, even the CSS, I don't like. You can just intercept that request, add in some CSS, Change up, redirect, whatever it is you want to do, and then continue on to the hosted service or modify it, which is really nice. So I did that, and it was working great for about 6 months until the cloud app SSL expired.

And they couldn't renew it because they couldn't what happens is when you have Cloudflare on, when you're proxying it, it's called orange clouding it, Meaning all your traffic goes through Cloudflare first and then to the service.

Then they removed my custom domain name because they say we can't. We we don't see that you're pointing it to us anymore. You're pointing it at another service provider, which is true. You're pointing it at Cloudflare, not not the actual service. Right? So if you want, how do you solve all this? Right? You render CloudApp. Heroku does this.

Ideally, what needs to happen is you You want what's called full SSL encryption, meaning that between Cloudflare and your server, You want that traffic to be encrypted.

And then between the user and Cloudflare, you want that traffic to be encrypted as well. So there's kind of 2 SSL certs that need to happen here. Right? Some people don't encrypt the traffic that's between Cloudflare and the server, But, that that probably nothing will happen, but still, that's kinda you're kinda leaving yourself open there. Right? Encrypt all the things. Encrypt. Yeah. You might as well. So what's the solution to that? Because the solution is that the SSL between you and Cloudflare works, but the SSL certificate between Cloudflare and your your hosting provider is not able to generate because they can't see that you're pointing it at the right direction, and therefore, they can't validate it. So the solutions are I gotta say that my solution to this

was to to gray cloud it and not to proxy it. Yeah. And so I'm I'm interested to hear what you were able to accomplish here. Most hosting providers will tell you just create cloud it and, like which means, like, just turn it off,

Use Cloudflare as a domain name registrar. That's it. Yep. And you don't get stats or I don't think you get page rules Or you don't get most of the stuff Cloudflare. There's no special sauce. It's just a DNS.

So the solution is you can The first one, you can get what's called an origin certificate, meaning that you supply your own certificate between Cloudflare and your actual hosting provider. So Cloudflare will generate a certificate. And instead of using Let's Encrypt to, do the certificate for your your hosting provider. You can use Cloudflare's cert and install it. Now not all of them will offer this. Heroku only offers it if you have a paid platform.

CloudApp has a a way to upload it, but it wasn't working. Render doesn't have anything for this at all. So second one, gray cloud it, meaning that you can just turn it off, which is what most people do, And then turn it back on. So this was the actual solution with render. I was I was Oh, interesting. Like, luckily, this is where Having a podcast is kind of nice is that, like, you have a problem. People very quickly are sometimes

able to help you, which is nice. It. So Yeah. Render added PNPM support because I tweeted about it. There you go. It'd be amazing. Yeah. They had it in, like, 24 hours. The

CEO of render email me is like, hey, I see you got your issue solved, but any anything else you'd like to see? I'm like, well, don't mind if I do. Here's my. Yes.

They're they're amazing, right? They're great. Yeah. They're great. So,

the solution was is great cloud it turn off Cloudflare, Approve the SSL certificate and then turn the orange cloud back on. And I was saying, okay. But what happens when you need to renew it? Because it's just going to break in 3 or 6 months when that certificate is expired. And they said, no, no, no, you're you're in their UI was confusing. So they said this is valid confusion, but proving that you own the domain name to us And us generating SSL certificate is 2 separate things. We only have to prove you own the domain name once.

And then the actual SSL Generation, what they use is the HTTP challenge. So they will put a they will put that file on your server at well known.

It's called Acme Challenge, and they will continue to Renew themselves automatically without having to turn Cloudflare off. So Interesting. This whole episode to say, turn your turn your gray off, Approve it and then heard it back on. That's not the case for everything. With CloudApp, it didn't work. They've revoked it after I turned it back on.

But in renders case, it was. They're still confusing because if you go to your render domain names, as soon as you turn the gray cloud or the orange cloud back on, It will say there's an error DNS update needed.

And I said, like, I was like, guys, is broken again. No, no, no, no. It's fine.

So you just have to, like, live with these ugly errors. I'm sure they'll update that UI to make it more clear That the SSL is still good. It's just that the domain name is not pointed at

render anymore. The domain name is pointed at CloudFlare and CloudFlare is endpoint live on air right now. I'm in that orange cloud, one of my gray clouds. Live on air. Just turn it on.

And then the other thing That render didn't say I needed to do this, but I think I'm going to do it anyway, is that in order to validate the HTTP request, The challenge, like the the special URL on your server, you must that must be served over HTTP, not HTTPS.

So So must be served insecurely over port 80.

So you can write a page rule in Cloudflare That says when somebody hits this URL like forward slash well known, then turn it off. Turn off SSL And serve up insecurely. And that's really nice. Nice thing to do with with Cloudflare Pages. This is also what Vercel recommends. So Vercel will work With Cloudflare. They don't want you to, but it will work this way as well.

Wes, so drop in these Secrets. Yeah. Web dev, tools of the trade secrets of the trade here. This is pretty neat because I didn't know this, and and I did. I just I I I tweeted about in 20 or or wherever. I read the documentation that just says just gray clouded. I gray clouded it. That was the end of that. But I appreciate you saying, it. That's not good enough for me. I would like I would like the orange cloud, please, and you went out and got it. You know what? And the funny thing is is that

render uses Cloudflare themselves.

So that country header that I really needed, it it came Even when I was gray clouded because render gave it to you because they use Cloudflare. So I could have been. Yeah. You know what? I'll just create cloud. It'll be okay. I'll lose stats and all those custom rules and all that stuff. But I was like, no, I really like to have, Like, you don't need Cloudflare until you need it. And when you need it, you need it. So it's best to get that that stuff set up for when you actually need it. And then it's It's not so stressful. Yeah. That DNS protection and even that stuff. Yep.

Alright. Cool. Well, this has this has been pretty illuminating for me. I I'm pretty into this. I'm being illuminated by an orange cloud now, and so far, so good. Who knows? It seems like it's, Seems like we're all good here. So, hey, Wes. I appreciate you. Yeah. Hopefully, you don't get the dreaded, like,

HTTP or too many redirects that always happens on Cloudflare. Oh, yeah.

Nothing given.

Hey. What about your 8 a record as well? Do you have anything for your a record? Yeah. So the

You have to set up 2 things in your DNA. You set up a c name for w w w, and that goes to your render domain name.

And then you set up an a record for your your top level domain name, and that points to an IP address that they give you.

But Cloudflare also has this thing that most DNS providers don't have, and it's the ability to do What's called the top level c name. I mean, like, c names are usually for subdomain names, but you can do what's called c name flattening with CloudFlare.

And I'm pretty sure you could do a c name for the at sign which is top level And point it towards your, point it towards your domain name because that makes me a little nervous pointing at a at an IP address For render instead of pointing it at my render domain name because probably at some point I'll get a an email being like action needed.

They're they're changing the IP of the machine that that does a load balancing.

So I haven't tried that yet just because I'm I'm A little bit scared too.

So you you the what what do you you have an a record, or you have a flat c name? I have an a record. I

And then you go into render and you wait for the cert to be issued, and then you go back. That takes a minute or so. And then you go back to Cloudflare and turn your orange cloud back on. So you're you're not orange cloud. Of the a record and c name. For both of them. Yeah. Exactly. So you're without orange cloud for maybe a minute. Sweet. Yep. Very sweet. I like this, West. This has been very informative, and I'm I'm sure that will help a lot of people because it's the type of thing that you hit and you just Alright. I guess I'm I'm done with Cloudflare proxying then. So, yeah, really great work. Beautiful. Alright. Thanks everyone for tuning in. Catch you on Wednesday. A Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.