typo3-typescript-sources 13.4.20

package/backend/security/element/csp-reports.ts

@@ -0,0 +1,406 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property, state } from 'lit/decorators';
+import { html, LitElement, nothing, type TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import RegularEvent from '@typo3/core/event/regular-event';
+import { lll } from '@typo3/core/lit-helper';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+
+enum CspReportAttribute {
+  fixable= 'fixable',
+  irrelevant = 'irrelevant',
+  suspicious = 'suspicious',
+}
+
+interface CspReportUuids {
+  uuids: string[]
+}
+
+interface SummarizedCspReport {
+  uuid: string,
+  scope: string;
+  created: Date;
+  requestTime: number;
+  summary: string;
+  count: number,
+  attributes: CspReportAttribute[],
+  mutationHashes: string[];
+  meta: {
+    addr: string,
+    agent: string,
+  };
+  details: {
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#violation_report_syntax
+    disposition: 'enforce' | 'report',
+
+    blockedUri: string,
+    documentUri: string,
+    statusCode: number,
+    referrer?: string,
+
+    originalPolicy: string,
+    effectiveDirective: string,
+    /**
+     * @deprecated historical alias of effectiveDirective
+     * see https://w3c.github.io/webappsec-csp/#violation-events
+     */
+    violatedDirective: string,
+
+    sourceFile?: string,
+    scriptSample?: string,
+    columnNumber?: number,
+    lineNumber?: number,
+  };
+}
+
+interface MutationSuggestion {
+  collection: MutationCollection;
+  identifier: string;
+  priority?: number;
+  label?: string;
+  hash: string;
+  hmac: string;
+}
+
+interface MutationCollection {
+  mutations: Mutation[];
+}
+
+interface Mutation {
+  directive: string;
+  mode: string,
+  sources: string[]
+}
+
+@customElement('typo3-backend-security-csp-reports')
+export class CspReports extends LitElement {
+  @property({ type: Array }) scopes: string[];
+  @property({ type: String }) controlUri: string;
+  @state() selectedScope: string = null;
+
+  @state() reports: SummarizedCspReport[] = [];
+  @state() selectedReport: SummarizedCspReport | null = null;
+  @state() suggestions: MutationSuggestion[] = [];
+
+  private peripheralEvent: RegularEvent;
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this.fetchReports();
+    this.peripheralEvent = new RegularEvent('click', (evt: Event, target: HTMLElement) => {
+      if (target.dataset.cspReportsHandler === 'refresh') {
+        evt.preventDefault();
+        this.fetchReports();
+      }
+    });
+    this.peripheralEvent.delegateTo(document, '[data-csp-reports-handler]');
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.peripheralEvent?.release();
+  }
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="infolist-container infolist-overlay">
+        <div class="infolist">
+          <div class="infolist-header">
+            ${this.renderNavigation()}
+          </div>
+        </div>
+      </div>
+
+      <div class="infolist-container">
+        <div class="infolist">
+          <div class="infolist-content">
+            <div class="table-fit mb-0">
+              <table class="table table-striped">
+                <thead>
+                <tr>
+                  <th>${lll('label.created') || 'Created'}</th>
+                  <th>${lll('label.scope') || 'Scope'}</th>
+                  <th>${lll('label.violation') || 'Violation'}</th>
+                  <th>${lll('label.uri') || 'URI'}</th>
+                  <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                ${this.reports.length === 0 ? html`
+                  <tr><td colspan="5">${lll('label.label.noEntriesAvailable') || 'No entries available.'}</td></tr>
+                ` : nothing}
+                ${this.reports.map((report: SummarizedCspReport) => html`
+                  <tr class=${classMap({ 'table-info': this.selectedReport === report })} data-mutation-group=${report.mutationHashes.join('-')}
+                      @click=${() => this.selectReport(report)}>
+                    <td>${report.created}</td>
+                    <td>${report.scope}</td>
+                    <td>
+                      <span class="badge badge-warning">${report.count}</span>
+                      ${report.details.effectiveDirective}
+                    </td>
+                    <td>${this.shortenUri(report.details.blockedUri)}</td>
+                    <td>${report.attributes.join(', ')}</td>
+                  </tr>
+                `)}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="infolist-info${this.selectedReport ? ' infolist-info-showrecord' : ''}">
+            ${this.renderGuide()}
+            ${this.renderSelectedReport()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected renderNavigation(): TemplateResult {
+    return html`
+      <div class="btn-toolbar">
+        <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lll('label.scope') || 'Scope'}">
+          ${null === this.selectedScope ? lll('label.all') || 'ALL' : this.selectedScope}
+        </button>
+        <ul class="dropdown-menu">
+          <button class="dropdown-item dropdown-item-spaced" title="${lll('label.all') || 'ALL'}" @click=${() => this.selectScope(null)}>
+            <span class="${null === this.selectedScope ? 'text-primary' : '' }">
+              <typo3-backend-icon identifier="${null === this.selectedScope ? 'actions-dot' : 'empty-empty'}" size="small"></typo3-backend-icon>
+            </span>
+            ${lll('label.all') || 'ALL'}
+          </button>
+          ${this.scopes.map((scope: string) => html`
+            <li>
+              <button class="dropdown-item dropdown-item-spaced" title="${scope}" @click=${() => this.selectScope(scope)}>
+                <span class="${scope === this.selectedScope ? 'text-primary' : '' }">
+                  <typo3-backend-icon identifier="${scope === this.selectedScope ? 'actions-dot' : 'empty-empty'}" size="small"></typo3-backend-icon>
+                </span>
+                ${scope}
+              </button>
+            </li>`)}
+        </ul>
+        <button type="button" class="btn btn-danger" title="${lll('label.removeAll') || 'Remove all'}" @click=${() => this.invokeDeleteReportsAction()}>
+          ${lll('label.removeAll') || 'Remove all'}
+          ${this.selectedScope !== null ? html`"${this.selectedScope}"` : nothing}
+        </button>
+      </div>`;
+  }
+
+  protected renderGuide(): TemplateResult {
+    return html`${!this.selectedReport ? html`
+      <div class="infolist-info-norecord">
+        <div class="card mb-0">
+          <div class="card-body">
+            <p>${ lll('label.guide.no_record_selected') || 'Select a row to see more information.'}</p>
+          </div>
+        </div>
+      </div>
+    ` : nothing }`;
+  }
+
+  protected renderSelectedReport(): TemplateResult {
+    const report = this.selectedReport;
+    return html`${report ? html`
+      <div class="infolist-info-record">
+        <div class="card mb-0">
+          <div class="card-header">
+            <h3>${ lll('label.details') || 'Details'}</h3>
+          </div>
+          <div class="card-body">
+            <dl>
+              <dt>${ lll('label.directive') || 'Directive'} / ${ lll('label.disposition') || 'Disposition'}</dt>
+              <dd>${report.details.effectiveDirective} / ${report.details.disposition}</dd>
+
+              <dt>${ lll('label.document_uri') || 'Document URI'}</dt>
+              <dd>${report.details.documentUri} ${this.renderCodeLocation(report)}</dd>
+
+              ${report.details.sourceFile && report.details.sourceFile !== report.details.documentUri ? html`
+                <dt>${ lll('label.source_file') || 'Source File'}</dt>
+                <dd>${report.details.sourceFile}</dd>
+              ` : nothing}
+
+              <dt>${ lll('label.blocked_uri') || 'Blocked URI'}</dt>
+              <dd>${report.details.blockedUri}</dd>
+
+              ${report.details.scriptSample ? html`
+                <dt>${ lll('label.sample') || 'Sample'}</dt>
+                <dd><code>${report.details.scriptSample}</code></dd>
+              ` : nothing}
+
+              ${report.meta.agent ? html`
+                <dt>${ lll('label.user_agent') || 'User Agent'}</dt>
+                <dd><code>${report.meta.agent}</code></dd>
+              ` : nothing}
+
+              <dt>${ lll('label.uuid') || 'UUID'}</dt>
+              <dd><code>${report.uuid}</code></dd>
+
+              <dt>${ lll('label.summary') || 'Summary'}</dt>
+              <dd><code>${report.summary}</code></dd>
+            </dl>
+          </div>
+          ${this.suggestions.length > 0 ? html`
+            <div class="card-header">
+              <h3>${ lll('label.suggestions') || 'Suggestions'}</h3>
+            </div>
+          ` : nothing}
+          ${this.suggestions.map((suggestion: MutationSuggestion) => html`
+            <div class="card-body">
+              <h4>${suggestion.label || suggestion.identifier}</h4>
+              ${suggestion.collection.mutations.map((mutation: Mutation) => html`
+                <p>
+                  <i>${mutation.mode}</i>
+                  <code>${mutation.directive}: ${mutation.sources.join(' ')}</code>
+                </p>
+              `)}
+              <button class="btn btn-primary" @click=${() => this.invokeMutateReportAction(report, suggestion)}>
+                <typo3-backend-icon identifier="actions-check" size="small"></typo3-backend-icon>
+                ${ lll('button.apply') || 'Apply'}
+              </button>
+            </div>
+          `)}
+
+          <div class="card-footer">
+            <button class="btn btn-default" @click=${() => this.selectReport(null)}>
+              <typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
+              ${ lll('button.close') || 'Close'}
+            </button>
+            <button class="btn btn-default" @click=${() => this.invokeMuteReportAction(report)}>
+              <typo3-backend-icon identifier="actions-ban" size="small"></typo3-backend-icon>
+              ${ lll('button.mute') || 'Mute'}
+            </button>
+            <button class="btn btn-default" @click=${() => this.invokeDeleteReportAction(report)}>
+              <typo3-backend-icon identifier="actions-delete" size="small"></typo3-backend-icon>
+              ${ lll('button.delete') || 'Delete'}
+            </button>
+          </div>
+        </div>
+      </div>
+    ` : nothing }`;
+  }
+
+  private renderCodeLocation(report: SummarizedCspReport): TemplateResult|symbol {
+    if (!report.details.lineNumber) {
+      return nothing;
+    }
+    const parts = [report.details.lineNumber];
+    if (report.details.columnNumber) {
+      parts.push(report.details.columnNumber);
+    }
+    return html`(${parts.join(':')})`;
+  }
+
+  private selectReport(report: SummarizedCspReport): void {
+    this.suggestions = [];
+    if (report !== null && this.selectedReport !== report) {
+      this.selectedReport = report;
+      this.invokeHandleReportAction(report)
+        .then((suggestions: MutationSuggestion[]) => this.suggestions = suggestions);
+    } else {
+      this.selectedReport = null;
+    }
+  }
+
+  private selectScope(scope: string): void {
+    this.selectedScope = scope;
+    this.fetchReports();
+  }
+
+  private fetchReports(): void {
+    this.invokeFetchReportsAction().then((reports: SummarizedCspReport[]) => this.reports = reports);
+  }
+
+  /*
+   * Remote API calls
+   */
+
+  private filterReports(...uuids: string[]): void {
+    if (uuids.includes(this.selectedReport?.uuid)) {
+      this.selectedReport = null;
+    }
+    this.reports = this.reports.filter((report: SummarizedCspReport) => !uuids.includes(report.uuid));
+  }
+
+  private invokeFetchReportsAction(): Promise<SummarizedCspReport[]> {
+    return (new AjaxRequest(this.controlUri))
+      .post({ action: 'fetchReports', scope: this.selectedScope || '' })
+      .then((response: AjaxResponse) => response.resolve('application/json'));
+  }
+
+  private invokeHandleReportAction(report: SummarizedCspReport) {
+    return (new AjaxRequest(this.controlUri))
+      .post({ action: 'handleReport', uuid: report.uuid })
+      .then((response: AjaxResponse) => response.resolve('application/json'));
+  }
+
+  private invokeMutateReportAction(report: SummarizedCspReport, suggestion: MutationSuggestion) {
+    const summaries = this.reports
+      .filter((other: SummarizedCspReport) => other.mutationHashes.includes(suggestion.hash))
+      .map((other: SummarizedCspReport) => other.summary);
+    return (new AjaxRequest(this.controlUri))
+      .post({ action: 'mutateReport', scope: report.scope, hmac: suggestion.hmac, suggestion, summaries })
+      .then((response: AjaxResponse) => response.resolve('application/json'))
+      .then((response: CspReportUuids) => this.filterReports(...response.uuids));
+  }
+
+  private invokeMuteReportAction(report: SummarizedCspReport): void {
+    (new AjaxRequest(this.controlUri))
+      .post({ action: 'muteReport', summaries: [report.summary] })
+      .then((response: AjaxResponse) => response.resolve('application/json'))
+      .then((response: CspReportUuids) => this.filterReports(...response.uuids));
+  }
+
+  private invokeDeleteReportAction(report: SummarizedCspReport): void {
+    (new AjaxRequest(this.controlUri))
+      .post({ action: 'deleteReport', summaries: [report.summary] })
+      .then((response: AjaxResponse) => response.resolve('application/json'))
+      .then((response: CspReportUuids) => this.filterReports(...response.uuids));
+  }
+
+  private invokeDeleteReportsAction(): void {
+    (new AjaxRequest(this.controlUri))
+      .post({ action: 'deleteReports', scope: this.selectedScope || '' })
+      .then((response: AjaxResponse) => response.resolve('application/json'))
+      .then(() => this.fetchReports())
+      .then(() => this.selectReport(null));
+  }
+
+  /*
+   * Helper methods
+   */
+
+  private shortenUri(value: string): string
+  {
+    if (value === 'inline') {
+      return value;
+    }
+    try {
+      const uri = new URL(value);
+      return uri.hostname;
+    } catch {
+      return value;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-security-csp-reports': CspReports;
+  }
+}

package/backend/security/element/sudo-mode.ts

@@ -0,0 +1,249 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { customElement, property, query, state } from 'lit/decorators';
+import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import Viewport from '@typo3/backend/viewport';
+import { topLevelModuleImport } from '@typo3/backend/utility/top-level-module-import';
+import Modal, { Sizes } from '@typo3/backend/modal';
+import { SeverityEnum } from '@typo3/backend/enum/severity';
+import type { ReactiveElement } from '@lit/reactive-element';
+
+interface SudoModeResponse {
+  message: string;
+  redirect?: {
+    uri: string,
+  }
+}
+
+interface Labels {
+  cancel: string;
+  verify: string;
+  password: string;
+  verifyWithUserPassword: string;
+  verifyWithInstallToolPassword: string;
+  accessGranted: string;
+  invalidPassword: string;
+  userPasswordMode: string;
+  installToolPasswordMode: string;
+  verificationFailed: string;
+  verificationExpired: string;
+  sudoModeUserPasswordExplanation: string;
+  sudoModeInstallToolPasswordExplanation: string;
+}
+
+abstract class SudoModeProperties extends LitElement {
+  @property({ type: String }) verifyActionUri: string;
+  @property({ type: String }) cancelUri: string;
+  @property({ type: Boolean }) isAjax: boolean;
+  @property({ type: Boolean, attribute: 'has-fatal-error' }) hasFatalError: boolean;
+  @property({ type: Boolean, attribute: 'allow-install-tool-password' }) allowInstallToolPassword: boolean;
+  @property({ type: Object }) labels: Labels;
+  public windowRef: Window | undefined;
+}
+
+export const initiateSudoModeModal = async (properties: Omit<SudoModeProperties, keyof LitElement>): Promise<void> => {
+  const isInIframe = window.location !== window.parent.location;
+  if (isInIframe) {
+    // Create a top-level instance
+    topLevelModuleImport('@typo3/backend/security/element/sudo-mode.js');
+  }
+  const el = top.document.createElement('typo3-backend-security-sudo-mode');
+  Object.assign(el, properties);
+  el.windowRef = window;
+  top.document.body.append(el);
+  return new Promise<void>((resolve, reject) => {
+    el.addEventListener('typo3:sudo-mode:verified', () => resolve());
+    el.addEventListener('typo3:sudo-mode:finished', () => reject());
+  });
+};
+
+/**
+ * Web Component showing the sudo mode password dialogs. The password verification
+ * happens via AJAX, the redirect to the actually requested resources is triggered
+ * by this JavaScript component as well - since it is capable of navigating to the
+ * `top` frame directly (compared to using `target` in e.g. Fluid HTML).
+ */
+@customElement('typo3-backend-security-sudo-mode')
+export class SudoMode extends SudoModeProperties {
+
+  protected override render() {
+    return nothing;
+  }
+
+  protected override async firstUpdated() {
+    const isInIframe = window.location !== window.parent.location;
+    // Launched from /sudo-mode/module route
+    if (isInIframe) {
+      try {
+        await initiateSudoModeModal(this.getPropertyValues());
+      } catch {
+        // Go back to previous route when the modal is closed without verification
+        history.go(-1);
+      }
+      return;
+    }
+
+    Modal.advanced({
+      title: this.hasFatalError ? this.labels.verificationFailed : this.labels.verifyWithUserPassword,
+      severity: this.hasFatalError ? SeverityEnum.error : SeverityEnum.notice,
+      size: Sizes.small,
+      additionalCssClasses: ['modal-sudo-mode-verification'],
+      buttons: [
+        this.hasFatalError ? {
+          text: this.labels.cancel,
+          btnClass: 'btn-default',
+          trigger: () => {
+            top.location.href = this.cancelUri;
+          },
+        } : {
+          text: this.labels.verify,
+          name: 'verify',
+          form: 'verify-sudo-mode',
+          btnClass: 'btn-primary',
+        }
+      ],
+      content: html`
+        <typo3-backend-security-sudo-mode-form
+          .labels=${this.labels}
+          .verifyActionUri=${this.verifyActionUri}
+          .cancelUri=${this.cancelUri}
+          .isAjax=${this.isAjax}
+          .hasFatalError=${this.hasFatalError}
+          .allowInstallToolPassword=${this.allowInstallToolPassword}
+          .windowRef=${this.windowRef}
+          @typo3:sudo-mode:verified=${() => this.dispatchEvent(new Event('typo3:sudo-mode:verified'))}
+        ></typo3-backend-security-sudo-mode-form>
+      `
+    }).addEventListener('typo3-modal-hidden', (): void => {
+      this.dispatchEvent(new Event('typo3:sudo-mode:finished'));
+      this.remove();
+    });
+  }
+
+  protected getPropertyValues(): Omit<this, keyof LitElement> {
+    const properties = {} as Omit<this, keyof LitElement>;
+    const ctor = this.constructor as typeof ReactiveElement;
+    for (const key of ctor.elementProperties.keys() as IterableIterator<keyof Omit<this, keyof LitElement>>) {
+      properties[key] = this[key];
+    }
+    return properties;
+  }
+}
+
+@customElement('typo3-backend-security-sudo-mode-form')
+export class SudoModeForm extends SudoModeProperties {
+  @state() useInstallToolPassword = false;
+  @state() errorMessage: string = null;
+  @query('#password') passwordElement: HTMLInputElement;
+
+  protected override createRenderRoot(): HTMLElement | ShadowRoot {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    if (this.hasFatalError) {
+      return html`
+        <div>
+          <div class="alert alert-danger">${this.labels.verificationExpired}</div>
+        </div>
+      `;
+    }
+    return html`
+      <div>
+        ${this.errorMessage ? html`
+          <div class="alert alert-danger" id="invalid-password">${this.labels[this.errorMessage as keyof Labels] || this.errorMessage}</div>
+        ` : nothing}
+        <p>${this.useInstallToolPassword ? this.labels.sudoModeInstallToolPasswordExplanation : this.labels.sudoModeUserPasswordExplanation}</p>
+        <form method="post" class="form" id="verify-sudo-mode" spellcheck="false" @submit=${(evt: SubmitEvent) => this.verifyPassword(evt)}>
+          ${this.useInstallToolPassword ? nothing : html`
+            <input hidden aria-hidden="true" type="text" autocomplete="username" value=${TYPO3.configuration.username}>
+          `}
+          <div class="form-group">
+            <label class="form-label" for="password">${this.labels.password}</label>
+            <input required="required" class="form-control" id="password" type="password" name="password" autofocus
+                   autocomplete=${this.useInstallToolPassword ? 'section-install current-password' : 'current-password'}>
+          </div>
+        </form>
+        ${!this.allowInstallToolPassword ? nothing : html`
+          <div class="text-end">
+            <a href="#" @click=${(evt: MouseEvent) => this.toggleUseInstallToolPassword(evt)}>
+              ${this.useInstallToolPassword ? this.labels.userPasswordMode : this.labels.installToolPasswordMode}
+            </a>
+          </div>
+        `}
+      </div>
+    `;
+  }
+
+  protected override updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('useInstallToolPassword')) {
+      this.closest('typo3-backend-modal').modalTitle = this.getModalTitle();
+    }
+  }
+
+  protected getModalTitle() {
+    if (this.hasFatalError) {
+      return this.labels.verificationFailed;
+    }
+    if (this.useInstallToolPassword) {
+      return this.labels.verifyWithInstallToolPassword;
+    }
+    return this.labels.verifyWithUserPassword;
+  }
+
+  private async verifyPassword(evt: SubmitEvent): Promise<void> {
+    evt.preventDefault();
+    this.errorMessage = null;
+    try {
+      const response = await new AjaxRequest(this.verifyActionUri).post({
+        password: this.passwordElement.value,
+        useInstallToolPassword: this.useInstallToolPassword ? 1 : 0
+      });
+
+      const responseData: SudoModeResponse = await response.resolve('application/json');
+      this.dispatchEvent(new Event('typo3:sudo-mode:verified'));
+      this.closest('typo3-backend-modal').hideModal();
+      if (!this.isAjax && responseData.redirect) {
+        const { uri } = responseData.redirect;
+        const windowRef = this.windowRef ?? window;
+        if (windowRef.name === 'list_frame') {
+          Viewport.ContentContainer.setUrl(uri);
+        } else {
+          windowRef.location.assign(uri);
+        }
+      }
+    } catch (e: unknown) {
+      if (e instanceof AjaxResponse) {
+        const response = await e.resolve('application/json');
+        this.errorMessage = response.message;
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  private toggleUseInstallToolPassword(evt: MouseEvent): void {
+    evt.preventDefault();
+    this.useInstallToolPassword = !this.useInstallToolPassword;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-backend-security-sudo-mode': SudoMode;
+    'typo3-backend-security-sudo-mode-form': SudoModeForm;
+  }
+}

package/backend/security/sudo-mode-interceptor.ts

@@ -0,0 +1,19 @@
+import type { RequestMiddleware, RequestHandler } from '@typo3/core/ajax/ajax-request-types';
+
+export const sudoModeInterceptor: RequestMiddleware = async (request: Request, next: RequestHandler): Promise<Response> => {
+  // Requests are not immutable, therefore we clone to be able to re-submit exactly the same request later on
+  const requestClone = request.clone();
+  const response = await next(request);
+  if (response.status === 422) {
+    const { initiateSudoModeModal } = await import('@typo3/backend/security/element/sudo-mode');
+    const data = await response.json();
+    try {
+      await initiateSudoModeModal(data.sudoModeInitialization);
+    } catch {
+      // sudo mode was aborted
+      return response;
+    }
+    return next(requestClone);
+  }
+  return response;
+};