Gerätetyp

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

Angepasste Header

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

HTTP-Anforderungen POST und PUT ignorieren

Ignorieren Sie die HTTP-Anforderungen POST und PUT. In diesem Snippet werden alle anderen Anforderungen zum Ursprung durchgelassen.

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

Spider oder Crawler zurückweisen

Schützen Sie Ihren Ursprung vor unerwünschten Spider- oder Crawler-Elementen. Wenn der Benutzeragent in diesem Fall 'annoying-robot' ist, gibt die Edge-Funktion die Antwort zurück, anstatt die Anforderung an den Ursprung zu senden.

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

Verbindungsaufbau über eine bestimmte IP verhindern

IP-Adressen in Blacklist eintragen. Dieser Codeschnipsel verhindert, dass eine bestimmte IP (in diesem Fall 225.0.0.1) eine Verbindung zum Ursprung herstellt.

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

Signierte Anforderungen verifizieren

In diesem Beispiel wird der HMAC für jede Anfrage URL überprüft, deren Pfadname mit /verify/ beginnt.

Zur Erleichterung der Fehlersuche gibt diese Edge-Funktion eine 403-Meldung zurück, wenn URL oder HMAC ungültig sind oder die URL abgelaufen ist. In einer tatsächlichen Implementierung kann es sinnvoll sein, den Code 404 zurückzugeben.

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
}

Signierte Anforderungen generieren

Normalerweise werden Ihnen signierte Anfragen auf eine andere Art und Weise zugestellt, z. B. per E-Mail, oder Sie generieren sie selbst, wenn Sie den symmetrischen Schlüssel besitzen. Sie können die signierten Anforderungen auch in einer Edge-Funktion erzeugen.

Bei jeder Anfrage URL, die mit /generate/ beginnt, ersetzt CIS /generate/ durch /verify/, signiert den resultierenden Pfad mit seinem Zeitstempel und gibt den vollständigen, signierten URL im Antwortkörper zurück.

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

Streaming-Durchgriff

Beginnen Sie mit dem folgenden minimalen Durchgriffsbeispiel.

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

Beachten Sie die folgenden wichtigen Details:

• Obwohl streamBody() eine asynchrone Funktion ist, sollten Sie await nicht aufrufen, damit der Aufruf der Funktion fetchAndStream() nicht blockiert wird. Die Funktion wird für den Zeitraum, in dem sie eine ausstehende reader.read()-oder writer.write()-Operation hat, weiterhin asynchron ausgeführt.
• Rückstau: await Die Leseoperation, bevor Sie die Schreiboperation aufrufen. Gleichermaßen sollten Sie den Schreibvorgang unter await durchführen, bevor Sie den nächsten Lesevorgang aufrufen. Durch dieses Verarbeitungsmuster wird der Rückstau an den Ursprung weitergegeben.
• Fertigstellung: Rufen Sie am Ende writer.close() auf, um der Edge-Laufzeitfunktion zu signalisieren, dass Sie mit dem Schreiben dieses Antwortkörpers fertig sind. Nach dem Aufruf beendet sich streamBody()- wenn dieses Verhalten unerwünscht ist, übergeben Sie das zurückgegebene Versprechen an FetchEvent.waitUntil(). Wenn Ihr Script keinen Aufruf an writer.close() absetzt, wird der Hauptteil von der Laufzeit als abgeschnitten eingestuft, obwohl er möglicherweise wie beabsichtigt funktioniert.

Mehrere Anforderungen zusammenfassen und streamen

Dieser Anwendungsfall ähnelt dem Rezept für das Zusammenfassen mehrerer Anfragen, aber dieses Mal beginnen Sie mit dem Schreiben der Antwort, sobald Sie überprüft haben, dass jede Unteranfrage erfolgreich war - Sie müssen nicht auf die Antwortkörper warten.

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

Während der Laufzeit werden TypedArray-Elemente auf der Leseseite des Elements 'TransformStream' erwartet. Daher wird nie eine Zeichenfolge an writer.write() übergeben, nur Uint 8Arrays. Wenn eine Zeichenfolge geschrieben werden muss, verwenden Sie ein Element 'TextEncoder'.

HTML-Ressourcen zwischenspeichern

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

Das Festlegen der Cachestufe auf "Alles zwischenspeichern" überschreibt die "Speicherbarkeit im Cache" des Assets. Hinsichtlich TTL ist CIS immer noch auf Header angewiesen, die vom Ursprung festgelegt wurden.

Angepasste Cacheschlüssel

Diese Funktion ist nur für Enterprise-Kunden verfügbar.

Der Cache-Schlüssel einer Anfrage bestimmt, ob zwei Anfragen für Caching-Zwecke "gleich" sind. Wenn eine Anforderung denselben Cacheschlüssel aufweist wie eine vorherige Anforderung, kann dieselbe Antwort aus dem Cache für beide Anforderungen bereitgestellt werden.

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

CIS berechnet den Cache-Schlüssel für eine Anfrage auf der Grundlage der Anfrage URL, aber Sie möchten vielleicht, dass verschiedene URLs für Caching-Zwecke so behandelt werden, als ob sie gleich wären. Zum Beispiel, wenn der Inhalt Ihrer Website sowohl auf Amazon S3 als auch auf Google Cloud Storage gehostet wird (Sie haben denselben Inhalt an beiden Orten), und Sie dann eine Randfunktion verwenden, um zufällig zwischen den beiden zu balancieren. Sie möchten jedoch nicht zwei Kopien Ihrer Inhalte zwischenspeichern. Sie können benutzerdefinierte Cache-Schlüssel verwenden, um den Cache auf der Grundlage der ursprünglichen Anforderung URL und nicht der Unteranforderung URL einzurichten.

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

Denken Sie daran, dass Edge-Funktionen, die für verschiedene Zonen arbeiten, den Cache der jeweils anderen Zone nicht beeinflussen können. Sie können Cache-Schlüssel nur überschreiben, wenn Sie Anfragen innerhalb Ihrer eigenen Zone stellen (im vorherigen Beispiel war event.request.url der gespeicherte Schlüssel), oder Anfragen an Hosts, die nicht auf CIS sind. Wenn Sie eine Anfrage an eine andere CIS-Zone richten (z. B. eine Zone, die zu einem anderen CIS-Kunden gehört), steuert diese Zone vollständig, wie ihre eigenen Inhalte in CIS zwischengespeichert werden. Sie können dies nicht überschreiben.

Auf Basis des Ursprungsantwortcodes überschreiben

Diese Funktion ist nur für Enterprise-Kunden verfügbar.

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

Diese Option ist eine Variante der Funktion cacheTtl, bei der anhand des Statuscodes der Antwort ein TTL-Wert ausgewählt und nicht automatisch cacheEverything: true eingestellt wird. Wenn die Antwort auf diese Anforderung einen entsprechenden Statuscode aufweist, wird sie von CIS für den angegebenen Zeitraum zwischengespeichert und die vom Ursprung gesendeten Anweisungen werden überschrieben.