Protecting website with Cloudflare

Cloudflare
DNS
Namecheap
Domain
DDoS Protection
API Rate Limiting
Security
Next.js
Express
Published:04/05/2023Last updated:05/11/2023

Introduction

Before starting this website project, I had limited knowledge about DNS, website protection, or anything related to hosting and security. Surprisingly, setting up these components was pretty straightforward, although it took some time for everything to click.

As we all know, Vercel has been gaining popularity as a hosting service, thanks to its simplicity and user-friendly interface. Naturally, I chose to use it for my website.

I had already made my website public, but I decided to add a contact form and direct all messages to my private Discord channel. This got me thinking about security and how to protect my website from spam and other malicious attacks.

I initially attempted to add a simple Google reCAPTCHA to my contact form, but it proved to be too much hassle to implement on my website, at least for now.

Connect all ‌three platforms together

I couldn’t find a simple, straightforward tutorial on setting up the following configuration with a quick Google search, so I decided to write this post to help other beginners like me and to serve as a documentation for myself.

For the sake of this tutorial, I will assume that you already have a domain name from Namecheap and have previously connected it to Vercel.

If not, jorgearuv has a pretty straight forward guide on how to do it

Image

1 Namecheap

  1. Go to Namecheap and log in to your account
  2. Click Domain List
  3. Click on Manage next to your domain name.
  4. Scroll down to Nameservers and click Custom DNS.
  5. Clear any existing entries, if there are any.

Image

2 Cloudflare

  1. Open a new tab and navigate to Cloudflare and log in to your account
  2. Click Add a site and enter your domain name without the www part.
  3. You will be prompted to choose a plan.
    1. Select Free and Continue
  4. Wait for the scan to finish; this will take a moment.
  5. Scroll down to DNS Records and remove all records except CAA.

3 Vercel

  1. Open a new tab and visit Vercel and log in to your account 2.Click Domains in the navigation bar.
  2. Open the domain you want to connect to Cloudflare.
  3. Scroll down to DNS Records and copy the values of the following records:
TypeValue
CNAMEcname.vercel-dns.com.
A76.76.21.21
CAA0 issue “letsencrypt.org”

4 Back to Cloudflare

  1. Return to the Cloudflare tab.

  2. From “DNS management for your site click Add record

  3. Start with Type and choose CNAME from the dropdown menu

    1. In the Name field, add www or any other subdomain you want to use. (As you can see, I’m using dev.)
    2. To the Target field, paste the value cname.vercel-dns.com.
    3. Click Save

  4. Click Add record again.

    1. Choose A from the dropdown menu.
    2. In the Name field, add your domain name (without the www part).
    3. In the IPv4 address field, paste the value 76.76.21.21.
    4. Click Save.

  5. Click Add record once more (optional if you removed all the records from Cloudflare).

    1. Choose CAA from the dropdown menu.
    2. In the Name field, add your domain name (without the www part).
    3. In the Tag field, choose Only allow specific hostnames.
    4. In the CA Domain Name field, paste the value letsencrypt.org.
    5. Click Save.

  6. Scroll down to Cloudflare Nameservers.

    1. Copy the values of the two nameservers

Image

5 Back to Namecheap

  1. Return to the Namecheap tab.
  2. Paste the values of the two nameservers into the Custom DNS fields.
  3. Click the Green Tick icon to save the changes.

Now, wait for the DNS to propagate. This can take up to 24 hours, but it usually happens much faster

Add Security Rules

  1. Open Cloudflare dashboard and on left panel click on Security
  2. From the list, open WAF and select custom rules tab
  3. Create a new rule, there is some good tutorials on youtube which covers this topic but you can start with something simple like: Image

Which means that if the visitor is from China, India, Iran, Mexico, Russia or United States and threat score is higher than 5, make them solve simple check box captcha. This will prevent most of the bots from accessing your website.

Read more about Cloudflare Threat Score

There are lots of other rules you can add, but this is a good starting point and there is a lot more to explore in the cloudflare dashboard. But for simple websites this is more than enough.

Conclusion

And there you have it! Setting up your website with Namecheap, Cloudflare, and Vercel might seem a bit daunting at first, but with this guide, I hope you now feel more confident in tackling these tasks. This configuration not only makes your website more secure but also enhances its performance by leveraging Cloudflare’s features.

Remember, the security rules I shared are just a starting point. As you learn more about Cloudflare and the different security features it offers, you can create more customized rules to suit your website’s specific needs. The key is to find the right balance between security and user experience, ensuring that your website remains accessible to legitimate users while keeping malicious actors at bay. Of course, there is no such thing as a 100% secure website, but by following these steps, you can significantly reduce the risk of your website being compromised.

I hope you found this tutorial helpful, and I encourage you to explore more about website security and optimization. As your website grows, it’s essential to continually update the security measures to stay ahead of potential threats.

Good luck, and happy coding!

Back to Posts