Prevent access to website with Cloudflare

Securely Previewing Development Websites with Cloudflare Zero Trust

The Problem and the Solution

When developing a website for a client, a common challenge is providing them with a secure way to preview the work in progress before it goes live to the public. Simply hosting it publicly isn't ideal for privacy or security. Traditional methods might involve complex server configurations, VPNs, or password-protected directories, which can be cumbersome for both the developer and the client.

This document outlines a straightforward and effective solution using Cloudflare Zero Trust. We choose this method because it leverages Cloudflare's existing infrastructure, provides a robust layer of security based on identity rather than network location, and integrates seamlessly with websites already using Cloudflare, including those hosted on platforms like Cloudflare Pages (.pages.dev). This allows you to quickly add an authentication layer to your development site, ensuring only authorized individuals can access it.

Prerequisites

To implement this solution, you will need:

• A Cloudflare account.
• (Optional but recommended) A website domain managed by Cloudflare using their name servers.
• A website hosted on a Cloudflare DNS endpoint. This is compatible even with sites hosted on a .pages.dev address.

Steps to Implement Access Controls

Here are the steps to add access control to your website using Cloudflare Zero Trust:

1. Ensure Your Website is Accessible: Before setting up access controls, confirm your development website is live and publicly accessible. This process adds a layer on top of the public accessibility.

   • Example: Your website might be live at a URL like https://test-auth-cf.pages.dev/.

2. Log in to Cloudflare: Access your Cloudflare account.

3. Navigate to Zero Trust: In the Cloudflare dashboard menu on the left side, locate and click on the Zero Trust menu option.

4. Go to Access: Within the Zero Trust dashboard, find and click on Access.

5. Add an Application: On the Applications page, click the Add an application button.

6. Select Self-hosted: Choose the Self-hosted application type from the options provided.

7. Configure the Application: You will be taken to a configuration screen where you can define the application's settings, including the domain or subdomain to protect and the access policies (who is allowed to access it). (Continue the Cloudflare Zero Trust application configuration steps here, defining the specific policies and identity providers you wish to use for authentication.)

Future Applications

This method of using Cloudflare Zero Trust for access control is highly versatile and can be applied to various scenarios beyond just client website previews. Future uses might include:

• Protecting Staging Environments: Securely control access to staging or UAT (User Acceptance Testing) environments before deploying to production.
• Internal Tools and Dashboards: Restrict access to internal company tools, dashboards, or documentation sites to only authorized employees.
• Beta Testing Access: Provide exclusive access to beta versions of applications or features for a select group of testers.
• Securing Legacy Applications: Add a modern authentication layer to older applications that lack built-in security features.
• Granting Temporary Access: Easily provide temporary, time-limited access to specific resources for external contractors or partners.

By abstracting access control from the application itself and managing it at the edge with Cloudflare Zero Trust, you gain flexibility, enhance security, and simplify the process of controlling who can see your web-based resources.