Intro to Cloudflare

Welcome to a brief introduction to Cloudflare.

Table of Contents


Cloudflare Overview

Cloudflare is an integrated and intelligent Global Cloud (Anycast) Network.

Mission: to help build a better Internet.

Cloudflare in Numbers

An Integrated Global Cloud Network Image source: made by Lunalabs

  • 51Tb+ of global network capacity.
  • Accessible via 200 Points of Presence (POPs), strategically situated across 100 countries.
  • Handles 18M+ web requests per second on average.
  • Serves 25M+ protected web sites and services.
  • Blocks an average of 72B cyber threats a day.

Why choose Cloudflare

Why customers choose Cloudflare

  • Shared Intelligence
  • Network Scale
  • Ease of Use
  • No Trade Offs (Security + Performance)

Cloudflare’s Solutions

See below a brief overview on Cloudflare’s integrated global cloud network.

An Integrated Global Cloud Network Image source: https://www.cloudflare.com/enterprise/

Here is a preview of how the Cloudflare Dashboard looks like once you added your domain.

Cloudflare Web Dashboard Image source: https://dash.cloudflare.com/

Below you’ll find some of the most important solutions that Cloudflare offers. They are divided up the following categories:

  • Security
  • Performance
  • Reliability
  • Connectivity
  • Edge Developer Platform
  • Enterprise Security

Security

Performance

Reliability

Connectivity

Edge Developer Platform (Serverless)

Insights

Enterprise Security

Privacy

As honorable mentions: Cloudflare Pages and Cloudflare Registrar are definitely worth checking out, if you are interested in building your own website. Easy to use, and immediate security, reliability, and performance for your website.


More Materials

Here a list of interesting links on Cloudflare.com:

Learn more about Cloudflare and its solutions here:

If you are interested in learning more about performance browser networking, check out these links:


Disclaimer

This is a very general introduction to Cloudflare. Educational purposes only, and this blog post does not necessarily reflect the opinions of Cloudflare. There are many more aspects to Cloudflare and its products and services – this is merely an educational intro. Properly inform yourself, keep learning, keep testing, and feel free to share your learnings and experiences as I do. Hope it was helpful! Images are online and publicly accessible.


My Personal Website

After joining Cloudflare, I recognized the amazing potential of Cloudflare Pages and all of its other products, so I decided to migrate my website from Netlify to Cloudflare (sorry Netlify – it was nice!).

Step 0: Cloudflare Pages

First, I created a FREE account on Cloudflare, and connected my GitHub repository with Cloudflare Pages.

I had to tweak the deployment a little by adding the build command:

hugo --gc --minify -b https://CLOUDFLARE-PAGES.pages.dev/

Additionally, I had to set an Environment Variable:

HUGO_VERSION   0.80.0

After that, the page deployed and worked just fine.

Step 1: DNS

Now, go to dash.cloudflare.com and add your custom domain. Choose the FREE plan for starters, and simply follow the next steps.

On the DNS tab, add the following DNS records in order to connect to the page on Cloudflare Pages:

CNAME   davidtofan.com    CLOUDFLARE-PAGES.pages.dev   Auto
CNAME   www               CLOUDFLARE-PAGES.pages.dev   Auto

Furthermore, I also added an empty MX record because I do not use this domain for emails nor do I want to receive emails:

MX      davidtofan.com    .                            Auto

Step 2: Domain

In order to redirect www to davidtofan.com, go to Page Rules > Forwarding URL and set up the following Permanent Redirect Rule 301:

Matching URL:

www.davidtofan.com/*

Destination URL:

https://davidtofan.com/$1

Note: the DNS records need to be configured properly for this to work.

Then, I activated the DNSSEC function to add an extra layer of protection to my domain.

Step 3: Workers

Now on to Workers – it’s simply amazing! You can deploy serverless code instantly across the globe.

I used this JavaScript template to create HTTP Security Headers for my website by using Workers:

let securityHeaders = {
    "Content-Security-Policy": "default-src 'self'; upgrade-insecure-requests; img-src 'self'; object-src 'none'; form-action 'none'; base-uri 'none'; worker-src 'none'; child-src 'none'; frame-src 'none'; frame-ancestors 'none';",
    "Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
    "X-XSS-Protection": "1; mode=block",
    "X-Frame-Options": "DENY",
    "X-Content-Type-Options": "nosniff",
    "Referrer-Policy": "no-referrer",
    "Permissions-Policy": "fullscreen=(self), autoplay=(), geolocation=(), microphone=(), camera=(), payment=(), interest-cohort=()",
}
let sanitiseHeaders = {
    Server: ""
}
let removeHeaders = [
    "Public-Key-Pins",
    "X-Powered-By",
    "X-AspNet-Version"
]

addEventListener('fetch', event => {
	event.respondWith(addHeaders(event.request))
})

async function addHeaders(req) {
	let response = await fetch(req)
	let newHdrs = new Headers(response.headers)

	if (newHdrs.has("Content-Type") && !newHdrs.get("Content-Type").includes("text/html")) {
        return new Response(response.body , {
            status: response.status,
            statusText: response.statusText,
            headers: newHdrs
        })
	}

	Object.keys(securityHeaders).map(function(name, index) {
		newHdrs.set(name, securityHeaders[name]);
	})

	Object.keys(sanitiseHeaders).map(function(name, index) {
		newHdrs.set(name, sanitiseHeaders[name]);
	})

	removeHeaders.forEach(function(name){
		newHdrs.delete(name)
	})

	return new Response(response.body , {
		status: response.status,
		statusText: response.statusText,
		headers: newHdrs
	})
}

Feel free to change any details and adapt it to your needs. If you need help with the Content Security Policy (CSP), then check out my other article.

Step 4: Firewall

Now we set up a Firewall Rule on the Firewall Tab > Firewall Rules, such as for example to block some python requests on my website:

(http.user_agent contains "python")

There are some interesting examples on Runcloud Blog.

Step 5: Results

Finally, we analyze our website and check what has changed or improved:

Conclusion

Coming soon! Still working on some stuff…

David J. K. Tofan
David J. K. Tofan
Digital Consultant

I am a self-proclaimed world-citizen with an entrepreneurial spirit.

Related