pelligrag · September 25, 2024 19:00
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 = "m41nt3n4nc3"
 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">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="MSSmartTagsPreventParsing" content="true">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="robots" content="nocache">
    <meta name="robots" content="noindex,nofollow">
    <title>Site Under Maintenance</title>
    
    <!-- Add some styling for better presentation -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
        color: #333;
      }

      .maintenance-container {
        text-align: center;
        max-width: 600px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .maintenance-container img {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
      }

      .maintenance-container h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
      }

      .maintenance-container p {
        font-size: 1.2em;
        margin-bottom: 20px;
        color: #666;
      }

      .maintenance-container .footer {
        font-size: 0.9em;
        color: #888;
      }
      
      /* Responsive Design */
      @media only screen and (max-width: 600px) {
        .maintenance-container {
          padding: 15px;
        }

        .maintenance-container h1 {
          font-size: 2em;
        }

        .maintenance-container p {
          font-size: 1em;
        }
      }
    </style>
  </head>

  <body>
    <div class="maintenance-container">
      <img src="https://example.com/maintenance-icon.png" alt="Maintenance Icon">
      <h1>We're Under Maintenance</h1>
      <p>Our website is currently undergoing scheduled maintenance. We'll be back online shortly!</p>
      <p>Thank you for your patience.</p>
      <div class="footer">
        &copy; 2024 Your Company Name
      </div>
    </div>
  </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 = "m41nt3n4nc3"
	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">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="MSSmartTagsPreventParsing" content="true">
	<meta http-equiv="imagetoolbar" content="false">
	<meta name="robots" content="nocache">
	<meta name="robots" content="noindex,nofollow">
	<title>Site Under Maintenance</title>

	<!-- Add some styling for better presentation -->
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f8f9fa;
	font-family: Arial, sans-serif;
	color: #333;
	}

	.maintenance-container {
	text-align: center;
	max-width: 600px;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}

	.maintenance-container img {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	}

	.maintenance-container h1 {
	font-size: 2.5em;
	margin-bottom: 10px;
	}

	.maintenance-container p {
	font-size: 1.2em;
	margin-bottom: 20px;
	color: #666;
	}

	.maintenance-container .footer {
	font-size: 0.9em;
	color: #888;
	}

	/* Responsive Design */
	@media only screen and (max-width: 600px) {
	.maintenance-container {
	padding: 15px;
	}

	.maintenance-container h1 {
	font-size: 2em;
	}

	.maintenance-container p {
	font-size: 1em;
	}
	}
	</style>
	</head>

	<body>
	<div class="maintenance-container">
	<img src="https://example.com/maintenance-icon.png" alt="Maintenance Icon">
	<h1>We're Under Maintenance</h1>
	<p>Our website is currently undergoing scheduled maintenance. We'll be back online shortly!</p>
	<p>Thank you for your patience.</p>
	<div class="footer">
	© 2024 Your Company Name
	</div>
	</div>
	</body>
	</html>

	`;