TijdVoorDeTest/assets/controllers/csrf_protection_controller.ts

const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;

interface TurboSubmitEventDetail {
    formSubmission: {
        formElement: HTMLFormElement;
        fetchRequest: { headers: Record<string, string> };
    };
}

const CSRF_FIELD_SELECTOR =
    'input[data-controller="csrf-protection"], input[name="_csrf_token"]';

// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
// and thus this event-listener will not be executed.
document.addEventListener('submit', function (event) {
    generateCsrfToken(event.target as HTMLFormElement);
}, true);

// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
document.addEventListener('turbo:submit-start', function (event) {
    const detail = (event as CustomEvent<TurboSubmitEventDetail>).detail;
    const h = generateCsrfHeaders(detail.formSubmission.formElement);
    Object.keys(h).forEach(function (k) {
        detail.formSubmission.fetchRequest.headers[k] = h[k];
    });
});

// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
document.addEventListener('turbo:submit-end', function (event) {
    const detail = (event as CustomEvent<TurboSubmitEventDetail>).detail;
    removeCsrfToken(detail.formSubmission.formElement);
});

export function generateCsrfToken(formElement: HTMLFormElement): void {
    const csrfField = formElement.querySelector<HTMLInputElement>(
        CSRF_FIELD_SELECTOR,
    );

    if (!csrfField) {
        return;
    }

    let csrfCookie = csrfField.getAttribute(
        'data-csrf-protection-cookie-value',
    );
    let csrfToken = csrfField.value;

    if (!csrfCookie && nameCheck.test(csrfToken)) {
        csrfField.setAttribute(
            'data-csrf-protection-cookie-value',
            csrfCookie = csrfToken,
        );
        csrfField.defaultValue = csrfToken = btoa(
            String.fromCharCode.apply(
                null,
                Array.from(
                    (window.crypto ||
                        (window as unknown as { msCrypto: Crypto }).msCrypto)
                        .getRandomValues(new Uint8Array(18)),
                ),
            ),
        );
    }
    csrfField.dispatchEvent(new Event('change', { bubbles: true }));

    if (csrfCookie && tokenCheck.test(csrfToken)) {
        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie +
            '; path=/; samesite=strict';
        document.cookie = window.location.protocol === 'https:'
            ? '__Host-' + cookie + '; secure'
            : cookie;
    }
}

export function generateCsrfHeaders(
    formElement: HTMLFormElement,
): Record<string, string> {
    const headers: Record<string, string> = {};
    const csrfField = formElement.querySelector<HTMLInputElement>(
        CSRF_FIELD_SELECTOR,
    );

    if (!csrfField) {
        return headers;
    }

    const csrfCookie = csrfField.getAttribute(
        'data-csrf-protection-cookie-value',
    );

    if (
        tokenCheck.test(csrfField.value) && nameCheck.test(String(csrfCookie))
    ) {
        headers[String(csrfCookie)] = csrfField.value;
    }

    return headers;
}

export function removeCsrfToken(formElement: HTMLFormElement): void {
    const csrfField = formElement.querySelector<HTMLInputElement>(
        CSRF_FIELD_SELECTOR,
    );

    if (!csrfField) {
        return;
    }

    const csrfCookie = csrfField.getAttribute(
        'data-csrf-protection-cookie-value',
    );

    if (
        tokenCheck.test(csrfField.value) && nameCheck.test(String(csrfCookie))
    ) {
        const cookie = String(csrfCookie) + '_' + csrfField.value +
            '=0; path=/; samesite=strict; max-age=0';

        document.cookie = window.location.protocol === 'https:'
            ? '__Host-' + cookie + '; secure'
            : cookie;
    }
}

/* stimulusFetch: 'lazy' */
export default 'csrf-protection-controller';