HTTP-Anforderungsfilter mit Edge-Funktionen

Erfahren Sie, wie Sie die HTTP-Anfragefilterung mit AEM Edge-Funktionen implementieren, um Anfragen umzuschreiben oder umzuleiten oder HTTP-Antworten zu ändern.

Wann HTTP-Anfragen mit Edge-Funktionen gefiltert werden sollten

Eine AEM Edge-Funktion kann als Reverse-Proxy fungieren, der eine erweiterte Verarbeitung der Anfrage und Antwort durchführt, bevor sie die Quelle oder den Client erreichen.

Die beiden Szenarien sind:

Passen Sie die Anfrage an, bevor sie den Ursprung erreicht

Fangen Sie den Verkehr auf dem Weg zum Ursprung ab:

Ändern Sie die Antwort, bevor sie den Client erreicht

Abfangen des Traffics auf dem Rückweg zum Client (Besucher) zu:

Implementieren der HTTP-Anfragenfilterung

Beim Filtern von HTTP-Anfragen werden zwei Dateien verwendet. Die config/cdn.yaml entscheidet, welcher Traffic abgefangen und an Ihre AEM Edge-Funktion weitergeleitet werden soll. Die src/index.js führt die Anfrage- oder Antwortanpassung durch.

Der Ursprungsselektor und der Funktionsname müssen aufeinander abgestimmt sein. Wenn edgeFunctions.yaml my-edge-function deklariert, verwendet die Ursprungsauswahl edgefunction-my-edge-function in cdn.yaml.

Konfigurieren des CDN-Filters

# config/cdn.yaml (origin selector excerpt)
kind: "CDN"
version: "1"
data:
  originSelectors:
    rules:
      - name: route-to-edge-function
        when:
          allOf:
            - { reqProperty: tier, equals: "publish" } # publish traffic only; skip author
            - { reqProperty: domain, equals: "www.example.com" } # your site hostname
            - { reqProperty: originalPath, matches: "(/[^./]+|\\.html|/)$" } # page URLs; skip static assets (.css, .js, images, fonts)
            # - { reqProperty: method, in: ["GET", "HEAD"] } # optional: navigation only; skip POST, PUT, and other methods with bodies
            - { reqHeader: x-edgefunction-request, exists: false } # skip loopback requests to prevent infinite loops
        action:
          type: selectAemOrigin
          originName: edgefunction-my-edge-function # edgefunction-<name-of-the-function>

Wenn eine Bedingung fehlschlägt, erreicht die Anfrage nie Ihre AEM Edge-Funktion. Beginnen Sie mit den wenigsten Bedingungen, die Ihre Funktion benötigt, und fügen Sie nur weitere hinzu, um das Routing präziser zu gestalten. Informationen zu allen unterstützten Eigenschaften und Operatoren finden Sie unter Herkunftsselektoren.

Implementieren des Handlers

Jede AEM Edge-Funktion registriert einen Abruf-Ereignishandler. Verwenden Sie den Handler, um die Anfrage anzupassen, bevor sie die Quelle erreicht, die Antwort zu ändern, bevor sie den Client erreicht, oder beides.

Das folgende Codefragment zeigt die Anforderungsfilterung und Antwortänderung in einer AEM Edge-Funktion.

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));

async function handleRequest(event) {
  const req = event.request;
  const url = new URL(req.url);

  try {
    // ------------------------------------------------------------
    // --- Request filtering: adjust before origin ---
    // ------------------------------------------------------------

    // Example: Rewrite origin, path, or query
    // Replace origin based on some criteria such as path or query
    const newOriginRequest = new Request(`https://origin.example.com${url.pathname}${url.search}`);
    const newOriginResponse = await fetch(newOriginRequest);
    // Return the new origin response
    return newOriginResponse;

    ...

    // Example: Rewrite request headers before reaching the origin
    // Add or modify headers before the request reaches the origin, like adding an authorization token based on exchange with an external service.
    const originRequest = new Request(req, {
      headers: new Headers({ ...Object.fromEntries(req.headers), "Authorization": "Bearer <token>" }),
    });
    const originResponse = await fetch(originRequest);
    return originResponse;

    ...

    // ------------------------------------------------------------
    // --- Response filtering: modify before client ---
    // ------------------------------------------------------------

    // Example: Change response HTML (fetch from origin, transform the body)
    // Fetch the response from the origin, transform the body, and return the transformed response.
    const originRequest = new Request(`https://origin.example.com${url.pathname}`);
    const originResponse = await fetch(originRequest);
    const transformedHtml = transformHtml(await originResponse.text());
    return new Response(transformedHtml, { status: 200, headers: originResponse.headers });

    ...

    // Example: Redirect at the edge
    // Redirect the client to a new path, like a legacy URL to a new URL.
    return Response.redirect("https://www.example.com/new-path", 301);

    ...

    // Example: Personalize by request context (geo, device, or audience)
    // Fetch the response from the origin, personalize the body, and return the personalized response.
    const originRequest = new Request(`https://origin.example.com${url.pathname}`);
    const originResponse = await fetch(originRequest);
    const personalizedHtml = personalizeHtml(await originResponse.text());
    return new Response(personalizedHtml, { status: 200, headers: originResponse.headers });

    return new Response("Not implemented", { status: 501 });
  } catch (err) {
    console.log(err);
    return new Response("Error", { status: 500 });
  }
}

Wichtigste Punkte:

Entwurfsrichtlinien

Verhindern von Endlosschleifen bei CDN-Loopback

Eine Endlosschleife kann auftreten, wenn eine AEM Edge-Funktion Inhalte von der Quelle über das CDN abruft. Dieser Abruf gelangt erneut in das CDN, stimmt mit derselben Ursprungs-Selektorregel überein und wird zurück in die Funktion weitergeleitet.

Um dies zu verhindern, können Sie Loopback-Anfragen aus Ihrer Ursprungs-Selektor-Regel ausschließen, indem Sie eine Sentinel-Kopfzeile festlegen (z. B. x-edgefunction-request). Die ursprüngliche Besucheranfrage hat keine Kopfzeile und erreicht die AEM Edge-Funktion. Die Loopback-Anfrage überträgt den -Header, schlägt die Bedingung fehl und wird stattdessen an den Ursprung weitergeleitet.

Die folgenden Code- und Konfigurations-Snippets zeigen, wie unendliche Schleifen bei CDN-Schleifen verhindert werden.

// src/index.js
addEventListener("fetch", (event) => event.respondWith(handleRequest(event)));
...

// In the handler: set the sentinel on the loopback fetch
const loopbackRequest = new Request(`https://www.example.com${url.pathname}`, {
  headers: { "x-edgefunction-request": "true" },
});
await fetch(loopbackRequest);

Siehe Beispiele für AEM Edge-Funktionen, um zu erfahren, wie Sie die Sentinel-Kopfzeile im AEM Edge-Funktions-Handler festlegen.

# config/cdn.yaml (origin selector excerpt)
kind: "CDN"
version: "1"
data:
  originSelectors:
    rules:
      - name: route-to-edge-function
        when:
          allOf:
            ...
            - { reqHeader: x-edgefunction-request, exists: false } # skip loopback requests to prevent infinite loops
            ...

Unter Beispiele für AEM Edge-Funktionen erfahren Sie, wie Sie Anfragen ausschließen können, die bereits den Sentinel-Header in der CDN-Konfiguration enthalten.

Vollständige Beispiele

Das Repository Beispiele für AEM EdgeFunktionen enthält Abfangfunktionen mit vollständigen config/cdn.yaml:

Zusätzliche Ressourcen