Tipo di dispositivo

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  let uaSuffix = ''

  const ua = request.headers.get('user-agent')
  if (ua.match(/iphone/i) || ua.match(/ipod/i)) {
    uaSuffix = '/mobile'
  } else if (ua.match(/ipad/i)) {
    uaSuffix = '/tablet'
  }

  return fetch(request.url + uaSuffix, request)
}

Intestazioni personalizzate

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  let suffix = ''
  //Assuming that the client is sending a custom header
  const cryptoCurrency = request.headers.get('X-Crypto-Currency')
  if (cryptoCurrency === 'BTC') {
    suffix = '/btc'
  } else if (cryptoCurrency === 'XRP') {
    suffix = '/xrp'
  } else if (cryptoCurrency === 'ETH') {
    suffix = '/eth'
  }

  return fetch(request.url + suffix, request)
}

Ignora le richieste HTTP POST e PUT

Ignora le richieste HTTP POST e PUT. Questo frammento consente a tutte le altre richieste di passare attraverso l'origine.

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  if (request.method === 'POST' || request.method === 'PUT') {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

Blocca uno spider o un crawler

Proteggi la tua origine da spider o crawler non desiderati. In questo caso, se l'agent utente (user-agent) è “annoying-robot”, la funzione edge restituisce la risposta invece di inviare la richiesta all'origine.

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  if (request.headers.get('user-agent').includes('annoying_robot')) {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

Impedisci il collegamento di uno specifico IP

Indirizzi IP blocklist. Questo frammento di codice impedisce a uno specifico IP (in questo caso 225.0.0.1) di connettersi all'origine.

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {
  if (request.headers.get('cf-connecting-ip') === '225.0.0.1') {
    return new Response('Sorry, this page is not available.',
        { status: 403, statusText: 'Forbidden' })
  }

  return fetch(request)
}

Verifica delle richieste firmate

Questo esempio verifica l'HMAC per qualsiasi richiesta URL in cui il nome del percorso inizia con /verify/.

Per comodità di debug, questa funzione Edge restituisce un messaggio 403 se URL o HMAC non sono validi o se URL è scaduto. Si potrebbe voler restituire 404 in un'implementazione reale.

addEventListener('fetch', event => {
  event.respondWith(verifyAndFetch(event.request))
})

async function verifyAndFetch(request) {
  const url = new URL(request.url)

  // If the path doesn't begin with our protected prefix, just pass the request
  // through.
  if (!url.pathname.startsWith("/verify/")) {
    return fetch(request)
  }

  // Make sure we have the minimum necessary query parameters.
  if (!url.searchParams.has("mac") || !url.searchParams.has("expiry")) {
    return new Response("Missing query parameter", { status: 403 })
  }

  // We'll need some super-secret data to use as a symmetric key.
  const encoder = new TextEncoder()
  const secretKeyData = encoder.encode("my secret symmetric key")
  const key = await crypto.subtle.importKey(
    "raw", secretKeyData,
    { name: "HMAC", hash: "SHA-256" },
    false, [ "verify" ]
  )

  // Extract the query parameters we need and run the HMAC algorithm on the
  // parts of the request we're authenticating: the path and the expiration
  // timestamp.
  const expiry = Number(url.searchParams.get("expiry"))
  const dataToAuthenticate = url.pathname + expiry

  // The received MAC is Base64-encoded, so we have to go to some trouble to
  // get it into a buffer type that crypto.subtle.verify() can read.
  const receivedMacBase64 = url.searchParams.get("mac")
  const receivedMac = byteStringToUint8Array(atob(receivedMacBase64))

  // Use crypto.subtle.verify() to guard against timing attacks. Since HMACs use
  // symmetric keys, we could implement this by calling crypto.subtle.sign() and
  // then doing a string comparison -- this is insecure, as string comparisons
  // bail out on the first mismatch, which leaks information to potential
  // attackers.
  const verified = await crypto.subtle.verify(
    "HMAC", key,
    receivedMac,
    encoder.encode(dataToAuthenticate)
  )

  if (!verified) {
    const body = "Invalid MAC"
    return new Response(body, { status: 403 })
  }

  if (Date.now() > expiry) {
    const body = `URL expired at ${new Date(expiry)}`
    return new Response(body, { status: 403 })
  }

  // We've verified the MAC and expiration time; we're good to pass the request
  // through.
  return fetch(request)
}

// Convert a ByteString (a string whose code units are all in the range
// [0, 255]), to a Uint8Array. If you pass in a string with code units larger
// than 255, their values overflow!
function byteStringToUint8Array(byteString) {
  const ui = new Uint8Array(byteString.length)
  for (let i = 0; i < byteString.length; ++i) {
    ui[i] = byteString.charCodeAt(i)
  }
  return ui
}

Generazione delle richieste firmate

In genere, le richieste firmate vengono consegnate in modo fuori banda, come ad esempio un'email, oppure ne viene generata una da soli, se si dispone della chiave simmetrica. È inoltre possibile generare le richieste firmate in una funzione Edge.

Per qualsiasi richiesta URL che inizia con /generate/, CIS sostituisce /generate/ con /verify/, firma il percorso risultante con il suo timestamp e restituisce l'intero percorso firmato URL nel corpo della risposta.

addEventListener('fetch', event => {
  const url = new URL(event.request.url)
  const prefix = "/generate/"
  if (url.pathname.startsWith(prefix)) {
    // Replace the "/generate/" path prefix with "/verify/", which we
    // use in the first example to recognize authenticated paths.
    url.pathname = `/verify/${url.pathname.slice(prefix.length)}`
    event.respondWith(generateSignedUrl(url))
  } else {
    event.respondWith(fetch(event.request))
  }
})

async function generateSignedUrl(url) {
  // We'll need some super-secret data to use as a symmetric key.
  const encoder = new TextEncoder()
  const secretKeyData = encoder.encode("my secret symmetric key")
  const key = await crypto.subtle.importKey(
    "raw", secretKeyData,
    { name: "HMAC", hash: "SHA-256" },
    false, [ "sign" ]
  )

  // Signed requests expire after one minute. Note that you could choose
  // expiration durations dynamically, depending on, e.g. the path or a query
  // parameter.
  const expirationMs = 60000
  const expiry = Date.now() + expirationMs
  const dataToAuthenticate = url.pathname + expiry

  const mac = await crypto.subtle.sign(
    "HMAC", key,
    encoder.encode(dataToAuthenticate)
  )

  // `mac` is an ArrayBuffer, so we need to jump through a couple hoops to get
  // it into a ByteString, then a Base64-encoded string.
  const base64Mac = btoa(String.fromCharCode(...new Uint8Array(mac)))

  url.searchParams.set("mac", base64Mac)
  url.searchParams.set("expiry", expiry)

  return new Response(url)
}

Pass-Through in streaming

Inizia con il seguente esempio di pass-through minimo.

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

async function fetchAndStream(request) {
  // Fetch from origin server.
  let response = await fetch(request)

  // Create an identity TransformStream (a.k.a. a pipe).
  // The readable side becomes our new response body.
  let { readable, writable } = new TransformStream()

  // Start pumping the body. NOTE: No await!
  streamBody(response.body, writable)

  // ... and deliver our Response while that's running.
  return new Response(readable, response)
}

async function streamBody(readable, writable) {
  let reader = readable.getReader()
  let writer = writable.getWriter()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    // Optionally transform value's bytes here.
    await writer.write(value)
  }

  await writer.close()
}

Alcuni dettagli importanti da notare:

• Sebbene streamBody() sia una funzione asincrona, non si desidera richiamare await su di essa in modo che non blocchi l'avanzamento della chiamata della funzione fetchAndStream(). La funzione continua ad essere eseguita in modo asincrono per il periodo in cui ha un'operazione reader.read() o writer.write() in sospeso.
• Backpressure: await l'operazione di lettura prima di richiamare l'operazione di scrittura. Allo stesso modo, await l'operazione di scrittura prima di chiamare l'operazione di lettura successiva. Seguendo questo modello, si propaga la contropressione all'origine.
• Completamento: chiamare writer.close() alla fine, per segnalare al runtime della funzione Edge che la scrittura del corpo della risposta è terminata. Dopo essere stato richiamato, streamBody() termina - se questo comportamento non è desiderabile, passa la sua promessa restituita a FetchEvent.waitUntil(). Se lo script non chiama mai writer.close(), il corpo appare troncato al runtime, anche se potrebbe continuare a funzionare come previsto.

Aggrega e invia in streaming più richieste

Questo caso d'uso è simile alla ricetta dell'aggregazione di più richieste, ma questa volta si inizia a scrivere la risposta non appena si verifica che ogni sotto-richiesta è andata a buon fine, senza dover aspettare i corpi delle risposte.

addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request))
})

/**
 * Make multiple requests,
 * aggregate the responses and
 * stream it back as a single response.
 */
async function fetchAndApply(request) {
  const requestInit = {
    headers: { "Authorization": "XXXXXX" }
  }
  const fetches = [
    "https://api.coinbase.com/v2/prices/BTC-USD/spot",
    "https://api.coinbase.com/v2/prices/ETH-USD/spot",
    "https://api.coinbase.com/v2/prices/LTC-USD/spot"
  ].map(url => fetch(url, requestInit))

  // Wait for each fetch() to complete.
  let responses = await Promise.all(fetches)

  // Make sure every subrequest succeeded.
  if (!responses.every(r => r.ok)) {
    return new Response(null, { status: 502 })
  }

  // Create a pipe and stream the response bodies out
  // as a JSON array.
  let { readable, writable } = new TransformStream()
  streamJsonBodies(responses.map(r => r.body), writable)

  return new Response(readable)
}

async function streamJsonBodies(bodies, writable) {
  // We're presuming these bodies are JSON, so we
  // concatenate them into a JSON array. Since we're
  // streaming, we can't use JSON.stringify(), but must
  // instead manually write an initial '[' before the
  // bodies, interpolate ',' between them, and write a
  // terminal ']' after them.

  let writer = writable.getWriter()
  let encoder = new TextEncoder()

  await writer.write(encoder.encode("[\n"))

  for (let i = 0; i < bodies.length; ++i) {
    if (i > 0) {
      await writer.write(encoder.encode(",\n"))
    }
    writer.releaseLock()
    await bodies[i].pipeTo(writable, { preventClose: true })
    writer = writable.getWriter()
  }

  await writer.write(encoder.encode("]"))

  await writer.close()
}

Il runtime prevede di ricevere TypedArrays sul lato leggibile di TransformStream. Pertanto, non si passa mai una stringa a writer.write(), solo Uint 8Arrays. Se devi scrivere una stringa, utilizza un TextEncoder.

Memorizzazione nella cache delle risorse HTML

// Force CIS to cache an asset
fetch(event.request, { cf: { cacheEverything: true } })

L'impostazione del livello cache su Cache Everything sovrascrive la "memorizzazione nella cache" predefinita dell'asset. Per TTL, CIS si basa ancora su intestazioni configurate dall'origine.

Chiavi cache personalizzate

Questa funzione è disponibile solo per i clienti aziendali.

La chiave della cache di una richiesta è ciò che determina se due richieste sono "le stesse" per scopi di memorizzazione nella cache. Se una richiesta ha la stessa chiave di cache di una richiesta precedente, possiamo fornire la stessa risposta memorizzata nella cache per entrambi.

// Set cache key for this request to "some-string".
fetch(event.request, { cf: { cacheKey: "some-string" } })

CIS calcola la chiave della cache per una richiesta in base all' URL, ma potresti volere che URL diversi vengano trattati come se fossero gli stessi ai fini della memorizzazione nella cache. Ad esempio, se il contenuto del tuo sito web è ospitato sia su Amazon S3 che su Google Cloud Storage (hai lo stesso contenuto in entrambi i siti) e poi utilizzi una funzione edge per bilanciare casualmente tra i due. Tuttavia, non si desidera memorizzare nella cache due copie del contenuto. È possibile utilizzare chiavi di cache personalizzate per memorizzare nella cache in base alla richiesta originale URL anziché alla sotto-richiesta URL.

addEventListener("fetch", (event) => {
  let url = new URL(event.request.url)
  if (Math.random() < 0.5) {
    url.hostname = "example.s3.amazonaws.com"
  }
  else {
    url.hostname = "example.storage.googleapis.com"
  }

  let request = new Request(url, event.request)
  event.respondWith(
    fetch(request, {
      cf: { cacheKey: event.request.url },
    })
  )
})

Ricorda, le funzioni di bordo che operano per conto di zone diverse non possono influenzare la cache l'una dell'altra. Puoi sovrascrivere le chiavi della cache solo quando effettui richieste all'interno della tua zona (nell'esempio precedente event.request.url era la chiave memorizzata) o richieste agli host che non sono su CIS. Quando si effettua una richiesta a un'altra zona dell' CIS, ad esempio una zona che appartiene a un cliente dell' CIS, quella zona controlla completamente il modo in cui i propri contenuti vengono memorizzati nella cache all'interno dell' CIS; non è possibile ignorarla.

Sovrascrivi in base al codice di risposta di origine

Questa funzione è disponibile solo per i clienti Enterprise.

// Force response to be cached for 86400 seconds for 200 status
// codes, 1 second for 404, and do not cache 500 errors.
fetch(request, {
  cf: { cacheTtlByStatus: { "200-299": 86400, 404: 1, "500-599": 0 } },
})

Questa opzione è una versione della funzionalità cacheTtl che sceglie un TTL basato sul codice di stato della risposta e non imposta automaticamente cacheEverything: true. Se la risposta a questa richiesta ha un codice di stato che corrisponde, CIS memorizza nella cache per l'ora indicata e sovrascrive le direttive della cache inviate dall'origine.