How To Create A Secure Staging Environment For Cloudflare Pages

Why You Need A Staging Environment

• Test new features without affecting live users

• Check mobile browser compatibility

• Catch bugs and issues before they impact your production site

• Allow clients and team members to review changes before approval

• Maintain SEO rankings by preventing search engines from indexing test content

Cloudflare Pages makes setting up a staging environment straightforward, but there are important security considerations to address. This guide covers everything you need to create a secure, professional staging setup.

Creating A Staging Branch In GitHub

1. Log in to GitHub and navigate to your repository
2. Click on the “main” branch dropdown (top left of the repository)
3. Click “View all branches”

4. Click “New branch”

5. Name your branch “staging” and create it from your main branch

This branch will serve as the source for your staging environment. Any changes pushed to this branch will automatically deploy to your staging site.

Configuring Cloudflare Pages For Staging

Setting Up Branch Controls

1. Log in to your Cloudflare dashboard
2. Navigate to “Workers & Pages”

3. Select your Pages project
4. You should see a new preview deployment (likely failed due to missing environment variables)
5. Go to “Settings”
6. Make sure “Preview” is selected in the “Environment” dropdown
7. Click on the “Edit branch control” button

8. In the branch control editor make sure the production branch is set to “main” or “master”
9. For preview branch, select “custom branches” and under include type in “staging”
10. Click save

For more details on preview environments you can check out the Cloudflare Pages documentation.

Adding Environment Variables

Your staging environment needs the same environment variables as production. If you plan to use a different database for staging you will need to add the database credentials as environment variables.

1. Still in the Settings tab, scroll to “Environment variables”
2. Click “Add variable”
3. Make sure to select “Preview” environment when adding variables
4. Save your changes

If you retry the deployment now, your staging site will be publicly accessible and indexable by search engines. Let’s fix that.

Preventing Search Engine Indexing

To keep search engines from indexing your staging site we need to add a “noindex” header to the response.

1. In your Cloudflare dashboard, go to “Rules” > “Overview”
2. In the dropdown “Show Templates For” select “Transform Reuests or Responses”
3. Click “create rule” on the template named “Add static header to response”

4. Name your rule (e.g., “Add noindex to staging”)
5. Select “custom filter expression”
6. Set the following conditions:
   • Field: “URI Full”
   • Operator: “wildcard”
   • Value: http://staging.yourdomain.com/* (your staging domain)
7. Add another condition with OR operator:
   • Field: “URI Full”
   • Operator: “wildcard”
   • Value: http://staging.yourdomain.pages.dev/*
8. Under “Then…”, select “Set static” for the action
9. Header name: “X-Robots-Tag” (Make sure it’s capitalized)
10. Value: “noindex, nofollow”
11. Click “Save”

Setting Up A Custom Domain For Staging

Now let’s create a custom subdomain for your staging site:

1. Go back to your Pages project and click on the “Custom domains” tab and “Add custom domain”
2. Enter staging.yourdomain.com and click “Continue”
3. Confirm

4. Click “Check DNS records”

5. Go to “DNS” in your Cloudflare dashboard
6. Verify that you have a CNAME record for your domain
   • Type: “CNAME”
   • Name: “staging”
   • Target: “staging.yourdomain.pages.dev” (your Pages staging domain)

Now retry the deployment and open the staging preview URL. To verify the noindex tag is working:

1. Open browser developer tools
2. Go to the Network tab and refresh the page
3. Click on the main document request
4. Check that response headers include “X-Robots-Tag: noindex, nofollow”

Password Protecting Your Staging Site

For additional security, let’s add password protection. There are two approaches:

Option 1: Using Cloudflare Workers

1. In your Cloudflare dashboard, go to “Workers & Pages”
2. Click “Create a Service” > “Create Worker” and select the “Hello World” option

3. Click Edit Code

3. Replace the default code with this authentication code, thank you to Max Ivanov for the code
4. Change the username and password to your desired values

1
const USERNAME = 'demouser';
2
const PASSWORD = 'demopassword';
3
const REALM = 'Secure Area';
4

5
addEventListener('fetch', (event) => {
6
  event.respondWith(handleRequest(event.request));
7
});
8

9
async function handleRequest(request) {
10
  const authorization = request.headers.get('authorization');
11
  if (!request.headers.has('authorization')) {
12
    return getUnauthorizedResponse('Provide User Name and Password to access this page.');
13
  }
14
  const credentials = parseCredentials(authorization);
15
  if (credentials[0] !== USERNAME || credentials[1] !== PASSWORD) {
16
    return getUnauthorizedResponse('The User Name and Password combination you have entered is invalid.');
17
  }
18
  return await fetch(request);
19
}
20

21
function parseCredentials(authorization) {
22
  const parts = authorization.split(' ');
23
  const plainAuth = atob(parts[1]);
24
  const credentials = plainAuth.split(':');
25
  return credentials;
26
}
27

28
function getUnauthorizedResponse(message) {
29
  let response = new Response(message, {
30
    status: 401,
31
  });
32
  response.headers.set('WWW-Authenticate', `Basic realm="${REALM}"`);
33
  return response;
34
}

4. Deploy the worker
5. Go to the worker’s “Settings” tab
6. Make sure the workers.dev and preview URLs are disabled
7. Under “Routes”, click “Add route”

8. Set the zone to the current project
9. Route: “staging.yourdomain.com/*”
10. Failure mode closed block
11. Save

Redirecting pages.dev URLs

The *.pages.dev domain can’t be password-protected via Workers directly. To handle this we will redirect the pages.dev URLs to the custom domain:

1. Go to “Rules” > “Bulk Redirects”
2. Click “Add redirects” > “Manually add redirects”

3. Add two new redirect URLs
   • redirect 1
     • Source URL: yourdomain.pages.dev/
     • Target URL: https://yourdomain.com/
     • Status code: 301 (Permanent redirect)
     • Check all boxes under “edit parameters” except “Include Subdomains”
   • redirect 2
     • Source URL: staging.yourdomain.pages.dev/
     • Target URL: https://staging.yourdomain.com/
     • Status code: 301 (Permanent redirect)
     • Check all boxes under “edit parameters” except “Include Subdomains”
4. Save and exit

Option 2: Setting Up Cloudflare Access Zero Trust

This is outside the scope of this guide, please refer to the Cloudflare Access documentation for more information. I chose to use the workers method because it doesn’t require a payment method to set up.

Testing Your Staging Environment

1. Push changes to your staging branch in GitHub
2. Wait for Cloudflare Pages to deploy the changes
3. Visit staging.yourdomain.com
4. Enter the username and password when prompted
5. Verify your changes appear correctly
6. Check that the noindex header is present

Your staging site is now secure, protected from search engines, and requires authentication to access.

Best Practices For Using Your Staging Environment

• Always test changes in staging before merging to main

• Create a pull request workflow that requires staging approval

• Consider automating visual regression tests between staging and production

• Document the staging URL and credentials for your team

With this setup, you can confidently test changes, gather feedback, and maintain a professional production environment without worrying about unfinished work being visible to the public.