adshrc · November 12, 2024 19:44
diff --git a/README.txt b/README.txt
 Easy to use Maintenance page as a Cloudflare Worker. Once set up, you can enable it for unlimited pages in your CF account. Get rid of greedy subscriptions that charge you per domain.

 How to:
 1. Go to Cloudflare Workers and create a new Worker (url is https://dash.cloudflare.com/<your-id>/workers/new)
 2. paste the Code from above
 3. Set an AUTH_KEY and AUTH_VALUE and the maintenancePageHtml (optionally)
 4. deploy the worker
 5. goto Cloudflare and choose a domain, click on the Workers section (url is https://dash.cloudflare.com/<your-id>/<domain>/workers)
 6. click on "Add Route" and set the Route you want to enable the maintenance page for (typically <domain>/*)
 7. choose your previously created worker from the dropdown
 8. Visit the website and check if your maintenance page is working 🎉

 If you want to access the page behind the worker, use the following (private) link:
 http://<domain>?<AUTH_KEY>=<AUTH_VALUE>

 so for example:

 https://mydomain.com?token=choose-a-secret

 Once you used the private (token) link, you can access all pages. The token will be stored in a Cookie.


 Have fun!
diff --git a/worker.js b/worker.js
 const AUTH_KEY = "token"
 const AUTH_VALUE = "choose-a-secret"
 const VALID_AUTH = AUTH_KEY + "=" + AUTH_VALUE;

 addEventListener("fetch", event => {
  event.respondWith(handle(event.request))
 })

 async function handle(request) {
  const cookies = request.headers.get("Cookie") || "";

  // Check for cookie or token in url
  if (cookies.includes(VALID_AUTH) || request.url.includes(VALID_AUTH)) {
    // User has a valid token, so show the original page
    const originalResponse = await fetch(request);
    const response = new Response(originalResponse.body, originalResponse);

    // Store token in cookie if not included already
    if (!cookies.includes(VALID_AUTH)) {
      const tokenCookie = `${VALID_AUTH}; Path=/;`;
      response.headers.set('Set-Cookie', tokenCookie);
    }

    return response;
  } else {
    // User should see the maintenance site
    const modifiedHeaders = new Headers();
    modifiedHeaders.set('Content-Type', 'text/html');
    modifiedHeaders.append('Pragma', 'no-cache');
    
    return new Response(maintenancePageHtml, {
      headers: modifiedHeaders,
      status: 503,
      statusText: "Service Unavailable"
    });
  }
 }
 
 const maintenancePageHtml = `
  <!DOCTYPE html>
    <html lang="en" style="">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Under Maintenance</title>

        <meta name="MSSmartTagsPreventParsing" content="true">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="robots" content="nocache">
        <meta name="robots" content="noindex,nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
      <h1>Under Maintenance</h1>
    </body>
  </html>
 `;
	Easy to use Maintenance page as a Cloudflare Worker. Once set up, you can enable it for unlimited pages in your CF account. Get rid of greedy subscriptions that charge you per domain.

	How to:
	1. Go to Cloudflare Workers and create a new Worker (url is https://dash.cloudflare.com/<your-id>/workers/new)
	2. paste the Code from above
	3. Set an AUTH_KEY and AUTH_VALUE and the maintenancePageHtml (optionally)
	4. deploy the worker
	5. goto Cloudflare and choose a domain, click on the Workers section (url is https://dash.cloudflare.com/<your-id>/<domain>/workers)
	6. click on "Add Route" and set the Route you want to enable the maintenance page for (typically <domain>/*)
	7. choose your previously created worker from the dropdown
	8. Visit the website and check if your maintenance page is working 🎉

	If you want to access the page behind the worker, use the following (private) link:
	http://<domain>?<AUTH_KEY>=<AUTH_VALUE>

	so for example:

	https://mydomain.com?token=choose-a-secret

	Once you used the private (token) link, you can access all pages. The token will be stored in a Cookie.


	Have fun!
	const AUTH_KEY = "token"
	const AUTH_VALUE = "choose-a-secret"
	const VALID_AUTH = AUTH_KEY + "=" + AUTH_VALUE;

	addEventListener("fetch", event => {
	event.respondWith(handle(event.request))
	})

	async function handle(request) {
	const cookies = request.headers.get("Cookie") \|\| "";

	// Check for cookie or token in url
	if (cookies.includes(VALID_AUTH) \|\| request.url.includes(VALID_AUTH)) {
	// User has a valid token, so show the original page
	const originalResponse = await fetch(request);
	const response = new Response(originalResponse.body, originalResponse);

	// Store token in cookie if not included already
	if (!cookies.includes(VALID_AUTH)) {
	const tokenCookie = `${VALID_AUTH}; Path=/;`;
	response.headers.set('Set-Cookie', tokenCookie);
	}

	return response;
	} else {
	// User should see the maintenance site
	const modifiedHeaders = new Headers();
	modifiedHeaders.set('Content-Type', 'text/html');
	modifiedHeaders.append('Pragma', 'no-cache');

	return new Response(maintenancePageHtml, {
	headers: modifiedHeaders,
	status: 503,
	statusText: "Service Unavailable"
	});
	}
	}

	const maintenancePageHtml = `
	<!DOCTYPE html>
	<html lang="en" style="">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Under Maintenance</title>

	<meta name="MSSmartTagsPreventParsing" content="true">
	<meta http-equiv="imagetoolbar" content="false">
	<meta name="robots" content="nocache">
	<meta name="robots" content="noindex,nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
	<h1>Under Maintenance</h1>
	</body>
	</html>
	`;