and I guess Prom in a DO means saving the state of a counter in the DO 😅

<section> <h2>Your IP Address: <span id="user-ip">Loading...</span></h2> </section>

async function handleFetch(event) { let ip = event.request.headers.get('cf-connecting-ip'); let customersIPsRangesJson = await $(cloudflare_kv_name).get('$(employee_ip_range_key)', 'json') || []; const isIPInRange = customersIPsRangesJson.some(range => { return range && range.includes('-') && checkIPInRange(ip, range); }); if (isIPInRange) { return fetch(event.request); } else { return handleEvent(event, ip); } } class TextRewriter { constructor(newText) { this.newText = newText; } element(element) { const newContent = <span id="user-ip">${this.newText}</span>; element.replace(newContent, { html: true }); } } async function handleEvent(event, ip) { try { if (DEBUG) { // customize caching options.cacheControl = { bypassCache: true, }; } const page = await getAssetFromKV(event, options); const response = new Response(page.body, page); // allow headers to be altered response.headers.set("X-XSS-Protection", "1; mode=block"); response.headers.set("X-Content-Type-Options", "nosniff"); response.headers.set("X-Frame-Options", "DENY"); response.headers.set("Referrer-Policy", "unsafe-url"); response.headers.set("Feature-Policy", "none"); // Using HTMLRewriter to insert the IP address const rewriter = new HTMLRewriter() .on('span#user-ip', new TextRewriter(ip)); return rewriter.transform(response); }