Tipo de 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)
}

Cabeçalhos customizados

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)
}

Ignorar solicitações de HTTP POST e PUT

Ignorar solicitações de POST e PUT de HTTP. Esse fragmento permite que todas as outras solicitações sejam transmitidas à origem.

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)
}

Negar uma aranha ou um crawler

Proteja sua origem contra aranhas ou crawlers indesejados. Nesse caso, se o agente do usuário for um "robô inoportuno", a função do Edge retornará a resposta em vez de enviar a solicitação para a origem.

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)
}

Evitar a conexão de um IP específico

Inclua endereços IP na lista de bloqueios. Esse trecho de código impede que um IP específico (nesse caso, 225.0.0.1) se conecte à origem.

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)
}

Verificando solicitações assinadas

Este exemplo verifica o HMAC para qualquer solicitação URL em que o nome do caminho começa com /verify/.

Para conveniência de depuração, essa função do Edge retorna uma mensagem 403 se o URL ou o HMAC for inválido ou se o URL tiver expirado. Talvez você deseje retornar 404 em uma implementação real.

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
}

Gerando solicitações assinadas

Normalmente, as solicitações assinadas são entregues a você de alguma forma externa, como um e-mail, ou você mesmo gera uma se tiver a chave simétrica. Você também pode gerar as solicitações assinadas em uma função do Edge.

Para qualquer solicitação URL que comece com /generate/, CIS substitui /generate/ por /verify/, assina o caminho resultante com seu registro de data e hora e retorna o URL completo e assinado no corpo da resposta.

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)
}

Passagem de fluxo

Introdução ao exemplo de passagem mínima a seguir.

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()
}

Alguns detalhes importantes a serem observados:

• Embora streamBody() seja uma função assíncrona, você não deseja chamar await para que ela não bloqueie o progresso da chamada da função fetchAndStream(). A função continua a ser executada de forma assíncrona para o período em que ela possui uma operação reader.read() ou writer.write() pendente.
• Contrapressão: await a operação de leitura antes de chamar a operação de gravação. Da mesma forma, await a operação de gravação antes de chamar a próxima operação de leitura. Seguir esse padrão propaga a contrapressão para a origem.
• Conclusão: chame writer.close() no final, o que sinaliza para o tempo de execução da função do Edge que você terminou de escrever esse corpo de resposta. Depois de ser chamado, o site streamBody() é encerrado - se esse comportamento for indesejável, passe sua promessa retornada para FetchEvent.waitUntil(). Se o seu script nunca chamar writer.close(), o corpo aparecerá truncado para o tempo de execução, embora ele possa continuar a funcionar como desejado.

Agregar e transmitir diversas solicitações

Esse caso de uso é semelhante à receita de agregação de várias solicitações, mas, dessa vez, você começa a escrever a resposta assim que verifica que cada sub-solicitação foi bem-sucedida, sem precisar esperar pelos corpos de resposta.

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()
}

O tempo de execução espera receber TypedArrays no lado legível de TransformStream. Portanto, você nunca passa uma sequência para writer.write(), apenas Uint 8Arrays.. Se precisar gravar uma sequência, use um TextEncoder.

Armazenamento em cache de recursos HTML

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

A configuração do nível de cache para Armazenar tudo em cache substitui a "capacidade de armazenamento em cache" padrão do ativo. Para TTL, o CIS ainda conta com cabeçalhos configurados pela origem.

Chaves de cache customizadas

Esse recurso está disponível apenas para clientes corporativos.

A chave de cache de uma solicitação é o que determina se duas solicitações são "iguais" para fins de cache. Se uma solicitação tiver a mesma chave de cache que alguma solicitação anterior, poderemos servir a mesma resposta em cache para ambas.

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

CIS calcula a chave de cache para uma solicitação com base na solicitação URL, mas você pode querer que URLs diferentes sejam tratados como se fossem os mesmos para fins de cache. Por exemplo, se o conteúdo do seu site estiver hospedado em Amazon S3 e Google Cloud Storage (você tem o mesmo conteúdo em ambos os lugares), e você usar uma função de borda para equilibrar aleatoriamente entre os dois. No entanto, você não quer armazenar em cache duas cópias do seu conteúdo. Você pode usar chaves de cache personalizadas para armazenar em cache com base na solicitação original URL em vez da sub-solicitação 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 },
    })
  )
})

Lembre-se de que as funções de borda que operam em nome de zonas diferentes não podem afetar o cache umas das outras. Você pode substituir as chaves de cache somente quando fizer solicitações dentro de sua própria zona (no exemplo anterior, event.request.url era a chave armazenada) ou solicitações para hosts que não estejam em CIS. Quando você faz uma solicitação para outra zona CIS (por exemplo, uma zona que pertence a um cliente CIS diferente), essa zona controla totalmente como seu próprio conteúdo é armazenado em cache em CIS; você não pode substituí-lo.

Substituir com base no código de resposta de origem

Esse recurso está disponível apenas para clientes corporativos.

// 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 } },
})

Esta opção é uma versão do recurso cacheTtl que escolhe um TTL com base no código de status da resposta e não configura automaticamente cacheEverything: true. Se a resposta a essa solicitação tiver um código de status que corresponda, o CIS armazenará em cache pelo tempo instruído e substituirá as diretivas de cache enviadas pela origem.