mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-13 05:15:21 +02:00
Migrate frontend to TypeScript with Deno-based tooling (#209)
* Migrate frontend to TypeScript with Deno-based tooling (#206) Compiles assets/*.ts via sensiolabs/typescript-bundle (standalone SWC binary) and adds Deno for formatting, linting, type-checking, and tests, keeping the project's no-Node/npm approach intact. Wires all four into CI, the Justfile, and the pre-commit hook. * fix: build TypeScript assets before running PHPUnit in CI The tests job ran bin/console sass:build but never typescript:build, so var/typescript/ didn't exist and any page rendering the importmap (e.g. backoffice/base.html.twig) errored during tests. * test: add regression test for backoffice navbar-toggler dead target Guards against the navbar-toggler button pointing at a collapse target (#navbarSupportedContent) that isn't rendered for the current user — the bug hit on the login page before #210 restructured the nav to always render at least one item (the Releases link) regardless of auth state. * fix: stop hand-enumerating TS files for deno check deno check assets/*.ts assets/controllers/*.ts assets/controllers/bo/*.ts was duplicated in CI and the Justfile, and silently misses any new controller subdirectory (fmt/lint/test already recurse assets/ via deno.json). Add a top-level exclude for assets/vendor/ (respected by all deno subcommands, unlike the per-task include/exclude blocks) so deno check assets/ can recurse safely instead. * fix: GitHubReleasesService date parsing and falsy release name - Move the release-mapping array_map inside the try block so a malformed published_at (or any other parse failure) degrades to the same empty-list fallback as an HTTP failure, instead of throwing uncaught out of the cache callback. - Stop treating a release literally named "0" as unnamed — the old `?:` fallback is falsy for that string and silently substituted the tag name instead. - Render release dates in UTC explicitly; Twig's date filter otherwise silently converts to the app's default timezone (Europe/Amsterdam), which could show the wrong calendar day for releases near midnight. * docs: add scope-creep-as-a-service rule to CLAUDE.md Per user instruction: when a review turns up a real bug outside the current task's scope, fix it in the same MR (with a regression test) rather than just reporting it, unless it needs a human design call.
This commit is contained in:
@@ -0,0 +1,129 @@
|
||||
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';
|
||||
Reference in New Issue
Block a user