typo3-typescript-sources 13.4.20

package/core/java-script-item-processor.ts

@@ -0,0 +1,171 @@
+/*
+ * 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!
+ */
+/**
+ * This processor is used as client-side counterpart of `\TYPO3\CMS\Core\Page\JavaScriptItems
+ *
+ * @module @typo3/core/java-script-item-processor
+ * @internal Use in TYPO3 core only, API can change at any time!
+ */
+
+const FLAG_USE_IMPORTMAP = 2;
+const FLAG_USE_TOP_WINDOW = 16;
+const deniedProperties = ['__proto__', 'prototype', 'constructor'];
+const allowedJavaScriptItemTypes = ['assign', 'invoke', 'instance'];
+
+export interface JavaScriptInstruction {
+  type: string;
+  assignments?: object;
+  method?: string;
+  args: unknown[];
+}
+
+export interface JavaScriptItemPayload {
+  name: string;
+  flags: number;
+  exportName?: string;
+  items: JavaScriptInstruction[];
+}
+
+export interface JavaScriptItem {
+  type: 'globalAssignment' | 'javaScriptModuleInstruction';
+  payload: JavaScriptItemPayload;
+}
+
+export function loadModule(payload: JavaScriptItemPayload): Promise<any> {
+  if (!payload.name) {
+    throw new Error('JavaScript module name is required');
+  }
+
+  if ((payload.flags & FLAG_USE_IMPORTMAP) === FLAG_USE_IMPORTMAP) {
+    if (!(payload.flags & FLAG_USE_TOP_WINDOW)) {
+      return import(payload.name);
+    } else {
+      const event = new CustomEvent<{ specifier: string; importPromise: null|Promise<any>; }>(
+        'typo3:import-javascript-module',
+        {
+          detail: {
+            specifier: payload.name,
+            importPromise: null
+          }
+        }
+      );
+      top.document.dispatchEvent(event);
+      return event.detail.importPromise || Promise.reject(new Error('Top-level import failed'));
+    }
+  }
+
+  throw new Error('Unknown JavaScript module type');
+}
+
+export function resolveSubjectRef(__esModule: any, payload: JavaScriptItemPayload): any {
+  const exportName = payload.exportName;
+  if (typeof exportName === 'string') {
+    return __esModule[exportName];
+  }
+  return __esModule.default;
+}
+
+export function executeJavaScriptModuleInstruction(json: JavaScriptItemPayload): Promise<any[]> {
+  // `name` is required
+  if (!json.name) {
+    throw new Error('JavaScript module name is required');
+  }
+  if (!json.items) {
+    return loadModule(json);
+  }
+  const items = json.items
+    .filter((item) => allowedJavaScriptItemTypes.includes(item.type))
+    .map((item) => {
+      if (item.type === 'assign') {
+        return (__esModule: any) => {
+          const subjectRef = resolveSubjectRef(__esModule, json);
+          mergeRecursive(subjectRef, item.assignments);
+        };
+      } else if (item.type === 'invoke') {
+        return (__esModule: any): any => {
+          const subjectRef = resolveSubjectRef(__esModule, json);
+          if ('method' in item && item.method) {
+            return subjectRef[item.method](...item.args);
+          } else {
+            return subjectRef(...item.args);
+          }
+        };
+      } else if (item.type === 'instance') {
+        return (__esModule: any) => {
+          // this `null` is `thisArg` scope of `Function.bind`,
+          // which will be reset when invoking `new`
+          const args = [null].concat(item.args);
+          const subjectRef = resolveSubjectRef(__esModule, json);
+          return new (subjectRef.bind(...args));
+        };
+      } else {
+        return (): void => {
+          return;
+        };
+      }
+    });
+
+  return loadModule(json).then(
+    (subjectRef) => items.map((item) => item.call(null, subjectRef))
+  );
+}
+
+function isObjectInstance(item: any) {
+  return item instanceof Object && !(item instanceof Array);
+}
+
+function mergeRecursive(target: { [key: string]: any }, source: { [key: string]: any }) {
+  Object.keys(source).forEach((property) => {
+    if (deniedProperties.indexOf(property) !== -1) {
+      throw new Error('Property ' + property + ' is not allowed');
+    }
+    if (!isObjectInstance(source[property]) || typeof target[property] === 'undefined') {
+      Object.assign(target, { [property]:source[property] });
+    } else {
+      mergeRecursive(target[property], source[property]);
+    }
+  });
+}
+
+export class JavaScriptItemProcessor {
+  private readonly invokableNames: string[] = ['globalAssignment', 'javaScriptModuleInstruction'];
+
+  /**
+   * Processes multiple items and delegates to handlers
+   * (globalAssignment, javaScriptModuleInstruction)
+   */
+  public processItems(items: JavaScriptItem[]) {
+    items.forEach((item) => this.invoke(item.type, item.payload));
+  }
+
+  private invoke(name: 'globalAssignment' | 'javaScriptModuleInstruction', data: any) {
+    if (!this.invokableNames.includes(name) || typeof this[name] !== 'function') {
+      throw new Error('Unknown handler name "' + name + '"');
+    }
+    this[name].call(this, data);
+  }
+
+  /**
+   * Assigns (filtered) variables to `window` object globally.
+   */
+  private globalAssignment(payload: { [key: string]: any }) {
+    mergeRecursive(window, payload);
+  }
+
+  /**
+   * Loads and invokes a JavaScript (ESM) or requires.js (AMD) module.
+   */
+  private javaScriptModuleInstruction(payload: JavaScriptItemPayload) {
+    executeJavaScriptModuleInstruction(payload);
+  }
+}

package/core/lit-helper.ts

@@ -0,0 +1,126 @@
+/*
+ * 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 { type CSSResultArray, html, type HTMLTemplateResult, render, nothing, type TemplateResult } from 'lit';
+import type { ClassInfo } from 'lit/directives/class-map';
+import { until } from 'lit/directives/until';
+
+interface LitNonceWindow extends Window {
+  litNonce?: string;
+}
+
+/**
+ * @internal
+ */
+export const renderNodes = (result: TemplateResult): NodeList => {
+  const anvil = document.createElement('div');
+  render(result, anvil);
+  return anvil.childNodes;
+};
+
+/**
+ * @internal
+ */
+export const renderHTML = (result: TemplateResult): string => {
+  const anvil = document.createElement('div');
+  render(result, anvil);
+  return anvil.innerHTML;
+};
+
+/**
+ * @internal
+ */
+export const lll = (key: string, ...args: any[]): string => {
+  let languagePool = null;
+  if (window.TYPO3 && window.TYPO3.lang && typeof window.TYPO3.lang[key] === 'string') {
+    languagePool = window.TYPO3.lang;
+  } else if (top.TYPO3 && top.TYPO3.lang && typeof top.TYPO3.lang[key] === 'string') {
+    languagePool = top.TYPO3.lang;
+  }
+  if (languagePool === null) {
+    return '';
+  }
+
+  let index = 0;
+  return languagePool[key].replace(/%[sdf]/g, (match) => {
+    const arg = args[index++];
+    switch (match) {
+      case '%s':
+        return String(arg);
+      case '%d':
+        return String(parseInt(arg, 10));
+      case '%f':
+        return String(parseFloat(arg).toFixed(2));
+      default:
+        return match;
+    }
+  });
+};
+
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
+export const classesArrayToClassInfo = (classes: Array<string>): ClassInfo => {
+  return classes.reduce(
+    (classInfo: Writeable<ClassInfo>, name: string): Writeable<ClassInfo> => {
+      classInfo[name] = true;
+      return classInfo;
+    },
+    {} as Writeable<ClassInfo>
+  );
+};
+
+/**
+ * Creates style tag having using a nonce-value if declared in `window.litNonce`
+ * (see https://lit.dev/docs/api/ReactiveElement/#ReactiveElement.styles)
+ *
+ * @example
+ * ```
+ *  return html`
+ *    ${styleTag`
+ *      .my-style { ... }
+ *    `}
+ *    <div class="my-style">...</div>
+ *  `
+ * ```
+ * produces a template result containing
+ * ```
+ *    <style nonce="...">
+ *      .my-style { ... }
+ *    </style>
+ *    <div class="my-style">...</div>
+ * ```
+ * @deprecated avoid using dynamic styles in light DOM elements
+ */
+export const styleTag = (strings: string[]|TemplateStringsArray|CSSResultArray, windowRef?: Window): HTMLTemplateResult => {
+  const nonce = ((windowRef || window) as LitNonceWindow).litNonce;
+  if (nonce) {
+    return html`<style nonce="${nonce}">${strings}</style>`;
+  }
+  return html`<style>${strings}</style>`;
+};
+
+/**
+ * Delays rendering a renderable by `timeout` milliseconds
+ *
+ * @example
+ *
+ * ```
+ *   return html`${delay(80, () => html`Loading…`)}`
+ * ```
+ *
+ * @internal
+ */
+export const delay = <T>(timeout: number, result: () => T, fallback = () => nothing) => until(
+  new Promise<T>((resolve) => window.setTimeout(() => resolve(result()), timeout)),
+  fallback()
+);

package/core/literals.ts

@@ -0,0 +1,17 @@
+/*
+ * 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!
+ */
+
+export const selector = (stringParts: TemplateStringsArray, ...substitutions: string[]): string => String.raw(
+  { raw: stringParts },
+  ...substitutions.map(substitution => CSS.escape(substitution))
+);

package/core/referrer-refresh.ts

@@ -0,0 +1,2 @@
+document.querySelectorAll('a#referrer-refresh')
+  .forEach((element: HTMLAnchorElement) => element.click());

package/core/security-utility.ts

@@ -0,0 +1,89 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: @typo3/core/security-utility
+ * contains method to escape input to prevent XSS and other security related things
+ * @exports @typo3/core/security-utility
+ */
+class SecurityUtility {
+  private readonly documentRef: Document;
+
+  /**
+   * @param {Document} documentRef
+   */
+  constructor(documentRef: Document = document) {
+    this.documentRef = documentRef;
+  }
+
+  public getRandomHexValue(length: number): string {
+    if (length <= 0 || length !== Math.ceil(length)) {
+      throw new SyntaxError('Length must be a positive integer');
+    }
+    const values = new Uint8Array(Math.ceil(length / 2));
+    crypto.getRandomValues(values);
+    return Array.from(values)
+      .map((item: number): string => item.toString(16).padStart(2, '0'))
+      .join('')
+      .substr(0, length);
+  }
+
+  /**
+   * Encodes HTML to use according entities. Behavior is similar to PHP's
+   * htmlspecialchars. Input might contain XSS, output has it encoded.
+   *
+   * @param {string} value Input value to be encoded
+   * @param {boolean} doubleEncode (default `true`)
+   * @return {string}
+   */
+  public encodeHtml(value: string, doubleEncode: boolean = true): string {
+    const anvil: HTMLSpanElement = this.createAnvil();
+    if (!doubleEncode) {
+      // decode HTML entities step-by-step
+      // but NEVER(!) as a whole, since that would allow XSS
+      value = value.replace(/&[#A-Za-z0-9]+;/g, (html: string) => {
+        anvil.innerHTML = html;
+        return anvil.innerText;
+      });
+    }
+    // apply arbitrary data a text node
+    // thus browser is capable of properly encoding
+    anvil.innerText = value;
+    return anvil.innerHTML
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  public stripHtml(html: string): string {
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+  }
+
+  /**
+   * @param {string} value
+   */
+  public debug(value: string): void {
+    if (value !== this.encodeHtml(value)) {
+      console.warn('XSS?!', value);
+    }
+  }
+
+  /**
+   * @return {HTMLSpanElement}
+   */
+  private createAnvil(): HTMLSpanElement {
+    return this.documentRef.createElement('span');
+  }
+}
+
+export default SecurityUtility;

package/core/tests/ajax/ajax-request-test.ts

@@ -0,0 +1,290 @@
+/*
+ * 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 AjaxRequest from '@typo3/core/ajax/ajax-request.js';
+import { expect } from '@open-wc/testing';
+import { stub, type SinonStub } from 'sinon';
+import type { AjaxResponse } from '@typo3/core/ajax/ajax-response';
+import type { } from 'mocha';
+
+describe('@typo3/core/ajax/ajax-request', (): void => {
+  let promiseHelper: {
+    resolve: (response: Response) => void,
+    reject: (error: Error) => void
+  };
+
+  let fetchStub: SinonStub<Parameters<typeof fetch>, Promise<Response>>;
+
+  beforeEach((): void => {
+    const fetchPromise: Promise<Response> = new Promise((resolve, reject): void => {
+      promiseHelper = {
+        resolve: resolve,
+        reject: reject,
+      };
+    });
+    fetchStub = stub(window, 'fetch');
+    fetchStub.returns(fetchPromise);
+  });
+
+  afterEach((): void => {
+    fetchStub.restore();
+  });
+
+  it('sends GET request', (): void => {
+    (new AjaxRequest('https://example.com')).get();
+    expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: 'GET' }));
+  });
+
+  it('sends POST request with empty object', (): void => {
+    (new AjaxRequest('https://example.com')).post({});
+    expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: 'POST', body: '' }));
+  });
+
+  for (const requestMethod of ['POST', 'PUT', 'DELETE']) {
+    describe(`send a ${requestMethod} request`, (): void => {
+      function* requestDataProvider(): any {
+        yield [
+          'object as payload',
+          requestMethod,
+          { foo: 'bar', bar: 'baz', nested: { works: 'yes' } },
+          (): FormData => {
+            const expected = new FormData();
+            expected.set('foo', 'bar');
+            expected.set('bar', 'baz');
+            expected.set('nested[works]', 'yes');
+            return expected;
+          },
+          {}
+        ];
+        yield [
+          'JSON object as payload',
+          requestMethod,
+          { foo: 'bar', bar: 'baz', nested: { works: 'yes' } },
+          (): string => {
+            return JSON.stringify({ foo: 'bar', bar: 'baz', nested: { works: 'yes' } });
+          },
+          { 'Content-Type': 'application/json' }
+        ];
+        yield [
+          'JSON string as payload',
+          requestMethod,
+          JSON.stringify({ foo: 'bar', bar: 'baz', nested: { works: 'yes' } }),
+          (): string => {
+            return JSON.stringify({ foo: 'bar', bar: 'baz', nested: { works: 'yes' } });
+          },
+          { 'Content-Type': 'application/json' }
+        ];
+      }
+
+      for (const providedData of requestDataProvider()) {
+        const [name, requestMethod, payload, expectedFn, headers] = providedData;
+        const requestFn: string = requestMethod.toLowerCase();
+        it(`with ${name}`, (done): void => {
+          const request: any = (new AjaxRequest('https://example.com'));
+          request[requestFn](payload, { headers: headers });
+          expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: requestMethod, body: expectedFn() }));
+          done();
+        });
+      }
+    });
+  }
+
+  describe('send GET requests', (): void => {
+    function* responseDataProvider(): any {
+      yield [
+        'plaintext',
+        'foobar huselpusel',
+        {},
+        (data: any, responseBody: any): void => {
+          expect(typeof data === 'string').to.be.true;
+          expect(data).to.be.equal(responseBody);
+        }
+      ];
+      yield [
+        'JSON',
+        JSON.stringify({ foo: 'bar', baz: 'bencer' }),
+        { 'Content-Type': 'application/json' },
+        (data: any, responseBody: any): void => {
+          expect(typeof data === 'object').to.be.true;
+          expect(JSON.stringify(data)).to.equal(responseBody);
+        }
+      ];
+      yield [
+        'JSON with utf-8',
+        JSON.stringify({ foo: 'bar', baz: 'bencer' }),
+        { 'Content-Type': 'application/json; charset=utf-8' },
+        (data: any, responseBody: any): void => {
+          expect(typeof data === 'object').to.be.true;
+          expect(JSON.stringify(data)).to.equal(responseBody);
+        }
+      ];
+    }
+
+    for (const providedData of responseDataProvider()) {
+      const [name, responseText, headers, onfulfill] = providedData;
+      it('receives a ' + name + ' response', (done): void => {
+        const response = new Response(responseText, { headers: headers });
+        promiseHelper.resolve(response);
+
+        (new AjaxRequest(new URL('https://example.com'))).get().then(async (response: AjaxResponse): Promise<void> => {
+          const data = await response.resolve();
+          expect(fetchStub).calledWithMatch(new Request('https://example.com/', { method: 'GET' }));
+          onfulfill(data, responseText);
+          done();
+        });
+      });
+    }
+  });
+
+  describe('send requests with different input urls', (): void => {
+    function* urlInputDataProvider(): any {
+      yield [
+        'absolute url with domain',
+        new URL('https://example.com'),
+        {},
+        new URL('https://example.com/'),
+      ];
+      yield [
+        'absolute url with domain, with query parameter',
+        new URL('https://example.com'),
+        { foo: 'bar', bar: { baz: 'bencer' } },
+        new URL('https://example.com/?foo=bar&bar%5Bbaz%5D=bencer'),
+      ];
+      yield [
+        'absolute url without domain',
+        '/foo/bar',
+        {},
+        new URL(window.location.origin + '/foo/bar'),
+      ];
+      yield [
+        'absolute url without domain, with query parameter',
+        '/foo/bar',
+        { foo: 'bar', bar: { baz: 'bencer' } },
+        new URL(window.location.origin + '/foo/bar?foo=bar&bar%5Bbaz%5D=bencer'),
+      ];
+      yield [
+        'relative url without domain',
+        'foo/bar',
+        {},
+        new URL(window.location.origin + '/foo/bar'),
+      ];
+      yield [
+        'relative url without domain, with query parameter',
+        'foo/bar',
+        { foo: 'bar', bar: { baz: 'bencer' } },
+        new URL(window.location.origin + '/foo/bar?foo=bar&bar%5Bbaz%5D=bencer'),
+      ];
+      yield [
+        'fallback to current script if not defined',
+        '?foo=bar&baz=bencer',
+        {},
+        new URL(window.location.origin + window.location.pathname + '?foo=bar&baz=bencer'),
+      ];
+    }
+
+    for (const providedData of urlInputDataProvider()) {
+      const [name, input, queryParameter, expected] = providedData;
+      it('with ' + name, (): void => {
+        (new AjaxRequest(input)).withQueryArguments(queryParameter).get();
+        expect(fetchStub).calledWithMatch(new Request(expected.toString(), { method: 'GET' }));
+      });
+    }
+  });
+
+  describe('send requests with query arguments', (): void => {
+    function* queryArgumentsDataProvider(): any {
+      yield [
+        'single level of arguments',
+        { foo: 'bar', bar: 'baz' },
+        new URL('https://example.com/?foo=bar&bar=baz'),
+      ];
+      yield [
+        'nested arguments',
+        { foo: 'bar', bar: { baz: 'bencer' } },
+        new URL('https://example.com/?foo=bar&bar%5Bbaz%5D=bencer'),
+      ];
+      yield [
+        'string argument',
+        'hello=world&foo=bar',
+        new URL('https://example.com/?hello=world&foo=bar'),
+      ];
+      yield [
+        'array of arguments',
+        ['foo=bar', 'husel=pusel'],
+        new URL('https://example.com/?foo=bar&husel=pusel'),
+      ];
+      yield [
+        'object with array',
+        { foo: ['bar', 'baz'] },
+        new URL('https://example.com/?foo%5B0%5D=bar&foo%5B1%5D=baz'),
+      ];
+      yield [
+        'complex object',
+        {
+          foo: 'bar',
+          nested: {
+            husel: 'pusel',
+            bar: 'baz',
+            array: ['5', '6']
+          },
+          array: ['1', '2']
+        },
+        new URL('https://example.com/?foo=bar&nested%5Bhusel%5D=pusel&nested%5Bbar%5D=baz&nested%5Barray%5D%5B0%5D=5&nested%5Barray%5D%5B1%5D=6&array%5B0%5D=1&array%5B1%5D=2'),
+      ];
+      yield [
+        'complex, deeply nested object',
+        {
+          foo: 'bar',
+          nested: {
+            husel: 'pusel',
+            bar: 'baz',
+            array: ['5', '6'],
+            deep_nested: {
+              husel: 'pusel',
+              bar: 'baz',
+              array: ['5', '6']
+            },
+          },
+          array: ['1', '2']
+        },
+        new URL('https://example.com/?foo=bar&nested%5Bhusel%5D=pusel&nested%5Bbar%5D=baz&nested%5Barray%5D%5B0%5D=5&nested%5Barray%5D%5B1%5D=6&nested%5Bdeep_nested%5D%5Bhusel%5D=pusel&nested%5Bdeep_nested%5D%5Bbar%5D=baz&nested%5Bdeep_nested%5D%5Barray%5D%5B0%5D=5&nested%5Bdeep_nested%5D%5Barray%5D%5B1%5D=6&array%5B0%5D=1&array%5B1%5D=2'),
+      ];
+    }
+
+    for (const providedData of queryArgumentsDataProvider()) {
+      const [name, input, expected] = providedData;
+      it('with ' + name, (): void => {
+        (new AjaxRequest('https://example.com/')).withQueryArguments(input).get();
+        expect(fetchStub).calledWithMatch(new Request(expected.toString(), { method: 'GET' }));
+      });
+    }
+  });
+
+  describe('Aborts requests', (): void => {
+    it('via abort() method', (): void => {
+      const request = new AjaxRequest(new URL('https://example.com'));
+      request.get();
+      request.abort();
+      expect((fetchStub.firstCall.args[0] as Request).signal.aborted).to.be.true;
+    });
+
+    it('via signal option', (): void => {
+      const abortController = new AbortController();
+      const request = new AjaxRequest(new URL('https://example.com'));
+      request.get({ signal: abortController.signal });
+      abortController.abort();
+      expect(abortController.signal.aborted).to.be.true;
+      expect((fetchStub.firstCall.args[0] as Request).signal.aborted).to.be.true;
+    });
+  });
+});