CSRF-skydd

Lär dig hur du skapar och lägger till AEM CSRF-token för tillåtna POST-, PUT och Delete-begäranden till AEM för autentiserade användare.

AEM kräver att en giltig CSRF-token skickas för autentiserad POST, __PUT, eller DELETE HTTP-begäranden till både AEM Author och Publish.

CSRF-token krävs inte för GET förfrågningar, eller anonym förfrågningar.

Om ingen CSRF-token skickas med en POST-, PUT eller DELETE-begäran returnerar AEM ett 403-förbjudet svar och AEM loggar följande fel:

[INFO][POST /path/to/aem/endpoint HTTP/1.1][com.adobe.granite.csrf.impl.CSRFFilter] isValidRequest: empty CSRF token - rejecting
[INFO][POST /path/to/aem/endpoint HTTP/1.1][com.adobe.granite.csrf.impl.CSRFFilter] doFilter: the provided CSRF token is invalid

Se mer information om AEM CSRF-skydd.

CSRF-klientbibliotek

AEM tillhandahåller ett klientbibliotek som kan användas för att generera och lägga till CSRF-tokens XHR och formulärförfrågningar via patchning av kärnprototypfunktioner. Funktionen finns i granite.csrf.standalone klientbibliotekskategori.

Lägg till granite.csrf.standalone som ett beroende till klientbiblioteket som läses in på sidan. Om du till exempel använder wknd.site klientbibliotekskategori, lägga till granite.csrf.standalone som ett beroende till klientbiblioteket som läses in på sidan.

Skräddarsydd formulärinlämning med CSRF-skydd

Om användning av granite.csrf.standalone klientbibliotek är inte aktiverat för ditt användningsfall, kan du lägga till en CSRF-token manuellt i ett formulär som skickas. I följande exempel visas hur du lägger till en CSRF-token i en formulärsändning.

Detta kodfragment visar hur CSRF-token kan hämtas från AEM när formulär skickas och läggas till i en formulärinmatning med namnet :cq_csrf_token. Eftersom CSRF-token har kort livslängd är det bäst att hämta och ställa in CSRF-token omedelbart innan formuläret skickas, vilket säkerställer dess giltighet.

// Attach submit handler event to form onSubmit
document.querySelector('form').addEventListener('submit', async (event) => {
    event.preventDefault();

    const form = event.target;
    const response = await fetch('/libs/granite/csrf/token.json');
    const json = await response.json();

    // Create a form input named ``:cq_csrf_token`` with the CSRF token.
    let csrfTokenInput = form.querySelector('input[name=":cq_csrf_token"]');
    if (!csrfTokenInput?.value) {
        // If the form does not have a CSRF token input, add one.
        form.insertAdjacentHTML('beforeend', `<input type="hidden" name=":cq_csrf_token" value="${json.token}">`);
    } else {
        // If the form already has a CSRF token input, update the value.
        csrfTokenInput.value = json.token;
    }
    // Submit the form with the hidden input containing the CSRF token
    form.submit();
});

Hämta med CSRF-skydd

Om användning av granite.csrf.standalone klientbibliotek är inte aktiverat för ditt användningsfall, kan du lägga till en CSRF-token manuellt i en XHR-begäran eller hämta begäranden. I följande exempel visas hur du lägger till en CSRF-token i en XHR som skapats med fetch.

Detta kodfragment visar hur du hämtar en CSRF-token från AEM och lägger till den i en hämtningsbegäran CSRF-Token HTTP-begärandehuvud. Eftersom CSRF-token har kort livslängd är det bäst att hämta och ställa in CSRF-token omedelbart innan hämtningsbegäran görs, vilket säkerställer dess giltighet.

/**
 * Get CSRF token from AEM.
 * CSRF token expire after a few minutes, so it is best to get the token before each request.
 *
 * @returns {Promise<string>} that resolves to the CSRF token.
 */
async function getCsrfToken() {
    const response = await fetch('/libs/granite/csrf/token.json');
    const json = await response.json();
    return json.token;
}

// Fetch from AEM with CSRF token in a header named 'CSRF-Token'.
await fetch('/path/to/aem/endpoint', {
    method: 'POST',
    headers: {
        'CSRF-Token': await getCsrfToken()
    },
});

Dispatcher-konfiguration

När du använder CSRF-token på AEM Publiceringstjänst måste Dispatcher-konfigurationen uppdateras för att tillåta GET-begäranden till CSRF-tokenslutpunkten. Följande konfiguration tillåter GET-begäranden till CSRF-tokenslutpunkten i AEM Publiceringstjänst. Om den här konfigurationen inte läggs till returnerar CSRF-tokenslutpunkten ett 404-svar som inte hittades.

  • dispatcher/src/conf.dispatcher.d/filters/filters.any
...
/0120 { /type "allow" /method "GET" /url "/libs/granite/csrf/token.json" }
...
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69