@dr.pogodin/react-utils 1.47.0-alpha.3 → 1.47.0-alpha.4

package/src/client/getInj.ts

@@ -2,50 +2,70 @@
 
 /* global document */
 
-// Note: this way, only required part of "node-forge": AES, and some utils,
-// is bundled into client-side code.
-import forge from 'node-forge/lib/forge.js';
-
-// eslint-disable-next-line import/no-unassigned-import
-import 'node-forge/lib/aes.js';
-
 import type { InjT } from 'utils/globalState';
 
 import { getBuildInfo } from 'utils/isomorphy/buildInfo';
 
-// Safeguard is needed here, because the server-side version of Docusaurus docs
-// is compiled (at least now) with settings suggesting it is a client-side
-// environment, but there is no document.
-let inj: InjT = {};
-
-const metaElement: HTMLMetaElement | null = typeof document === 'undefined'
-  ? null : document.querySelector('meta[itemprop="drpruinj"]');
-
-if (metaElement) {
-  metaElement.remove();
-  let data = forge.util.decode64(metaElement.content);
-
-  const { key } = getBuildInfo();
-  const d = forge.cipher.createDecipher('AES-CBC', key);
-  d.start({ iv: data.slice(0, key.length) });
-  d.update(forge.util.createBuffer(data.slice(key.length)));
-  d.finish();
-
-  data = forge.util.decodeUtf8(d.output.data);
-
-  // TODO: Double-check, if there is a safer alternative to parse it?
-  // eslint-disable-next-line no-eval
-  inj = eval(`(${data})`) as InjT;
-} else if (typeof window !== 'undefined' && window.REACT_UTILS_INJECTION) {
-  inj = window.REACT_UTILS_INJECTION;
-  delete window.REACT_UTILS_INJECTION;
-} else {
-  // Otherwise, a bunch of dependent stuff will easily fail in non-standard
-  // environments, where no client-side initialization is performed. Like tests,
-  // Docusaurus examples, etc.
-  inj = {};
-}
+let inj: InjT | Promise<InjT> | undefined;
+
+export default function getInj(): InjT | Promise<InjT> {
+  inj ??= (async () => {
+    const metaElement: HTMLMetaElement | null = typeof document === 'undefined'
+      ? null : document.querySelector('meta[itemprop="drpruinj"]');
+
+    if (metaElement) {
+      metaElement.remove();
+
+      // NOTE: Since 2025 there is Uint8Array.fromBase64(), which should be
+      // preferred, but it is not supported by older environments yet.
+      const data = atob(metaElement.content);
+
+      // TODO: Our current handling of this encryption / decryption follows
+      // a legacy approach, and can be enhanced by using Crypto features.
+      // Though, this is not strictly intended to be secure (it is more
+      // to obfurscate injected data, rather than really keeping them
+      // secure), thus it is fine like this for now.
+      const { key } = getBuildInfo();
+
+      const code = (x: string) => x.charCodeAt(0);
+      const dataBuffer = Uint8Array.from(data.slice(16), code);
+      const ivBuffer = Uint8Array.from(data.slice(0, 16), code);
+      const keyBuffer = Uint8Array.from(atob(key), code);
+
+      const cKey = await window.crypto.subtle.importKey(
+        'raw',
+        keyBuffer,
+        { name: 'AES-CBC' },
+        false,
+        ['decrypt'],
+      );
+
+      const buffer = await window.crypto.subtle.decrypt({
+        iv: ivBuffer,
+        name: 'AES-CBC',
+      }, cKey, dataBuffer);
+
+      const decoder = new TextDecoder();
+
+      // eslint-disable-next-line no-eval
+      const res = eval(`(${decoder.decode(buffer)})`) as InjT;
+
+      // NOTE: This is important, to be able to return the injection
+      // synchronously once it is initialized.
+      inj = res;
+
+      return res;
+    } else if (typeof window !== 'undefined' && window.REACT_UTILS_INJECTION) {
+      const res = window.REACT_UTILS_INJECTION;
+      delete window.REACT_UTILS_INJECTION;
+      return res;
+    }
+
+    // Otherwise, a bunch of dependent stuff will easily fail in non-standard
+    // environments, where no client-side initialization is performed. Like tests,
+    // Docusaurus examples, etc.
+    return {};
+  })();
 
-export default function getInj(): InjT {
   return inj;
 }

package/src/client/index.tsx

@@ -20,14 +20,16 @@ type OptionsT = {
  * @param Application Root application component
  * @param [options={}] Optional. Additional settings.
  */
-export default function Launch(
+export default async function Launch(
   Application: ComponentType,
   options: OptionsT = {},
-): void {
+): Promise<void> {
+  const inj = await getInj();
+
   const container = document.getElementById('react-view');
   if (!container) throw Error('Failed to find container for React app');
   const scene = (
-    <GlobalStateProvider initialState={getInj().ISTATE ?? options.initialState}>
+    <GlobalStateProvider initialState={inj.ISTATE ?? options.initialState}>
       <BrowserRouter>
         <HelmetProvider>
           <Application />

package/src/index.ts

@@ -16,8 +16,8 @@ if (global.REACT_UTILS_LIBRARY_LOADED) {
 // TODO: This is a rapid workaround to get rid of __dirname. I guess, later
 // we'll re-implement requireWeak() to accept import.meta.url directly, and
 // this workaround won't be needed.
-let dirname = import.meta.url;
-dirname = dirname.slice(5, dirname.lastIndexOf('/'));
+// eslint-disable-next-line @typescript-eslint/prefer-destructuring
+const dirname = import.meta.dirname;
 
 const server = webpack.requireWeak<typeof ServerFactoryM>('./server', dirname);
 
@@ -54,10 +54,10 @@ export {
 
 export {
   assertEmptyObject,
-  config,
   Barrier,
   Cached,
   Emitter,
+  getConfig,
   isomorphy,
   getSsrContext,
   type Listener,

package/src/server/renderer.tsx

@@ -2,6 +2,8 @@
  * ExpressJS middleware for server-side rendering of a ReactJS app.
  */
 
+import { Buffer } from 'node:buffer';
+import { type Cipheriv, createCipheriv, randomBytes } from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 import { Writable } from 'node:stream';
@@ -23,7 +25,6 @@ import {
 } from 'lodash-es';
 
 import config from 'config';
-import forge from 'node-forge';
 
 import { prerenderToNodeStream } from 'react-dom/static';
 import { type HelmetDataContext, HelmetProvider } from '@dr.pogodin/react-helmet';
@@ -134,26 +135,15 @@ function readChunkGroupsJson(buildDir: string) {
 
 /**
  * Prepares a new Cipher for data encryption.
- * @param key Encryption key (32-bit random key is expected, see
- *  node-forge documentation, in case of doubts).
- * @return Resolves to the object with two fields:
+ * @param key Encryption key (32-bit random, Base64-encoded key is expected).
+ * @return Returns a tuple of:
  *  1. cipher - a new Cipher, ready for encryption;
  *  2. iv - initial vector used by the cipher.
  */
-async function prepareCipher(key: string): Promise<{
-  cipher: forge.cipher.BlockCipher;
-  iv: string;
-}> {
-  return new Promise((resolve, reject) => {
-    forge.random.getBytes(32, (err, iv) => {
-      if (err) reject(err);
-      else {
-        const cipher = forge.cipher.createCipher('AES-CBC', key);
-        cipher.start({ iv });
-        resolve({ cipher, iv });
-      }
-    });
-  });
+function prepareCipher(key: string): [cipher: Cipheriv, iv: Buffer] {
+  const iv = randomBytes(16);
+  const cipher = createCipheriv('AES-256-CBC', Buffer.from(key, 'base64'), iv);
+  return [cipher, iv];
 }
 
 /**
@@ -401,21 +391,9 @@ export default function factory(
       }
 
       const brr = ops.beforeRender!(req, sanitizedConfig as unknown as ConfigT);
+      const { configToInject, extraScripts, initialState } = await brr;
 
-      const [{
-        configToInject,
-        extraScripts,
-        initialState,
-      }, {
-        cipher,
-        iv,
-      }] = await Promise.all([
-        // NOTE: Written this way to avoid triggering the "await-thenable"
-        // ESLint rule.
-        brr instanceof Promise ? brr : Promise.resolve(brr),
-
-        prepareCipher(buildInfo.key),
-      ]);
+      const [cipher, iv] = prepareCipher(buildInfo.key);
 
       let helmet: HelmetDataContext['helmet'];
 
@@ -554,9 +532,12 @@ export default function factory(
         ignoreFunction: true,
         unsafe: true,
       });
-      cipher.update(forge.util.createBuffer(payload, 'utf8'));
-      cipher.finish();
-      const INJ = forge.util.encode64(`${iv}${cipher.output.data}`);
+
+      const INJ = Buffer.concat([
+        iv,
+        cipher.update(payload, 'utf8'),
+        cipher.final(),
+      ]).toString('base64');
 
       const chunkSet = new Set<string>();
 

package/src/shared/components/Modal/index.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
 } from 'react';
 
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
@@ -96,7 +96,7 @@ const BaseModal: FunctionComponent<PropsT> = ({
     />
   ), []);
 
-  return ReactDom.createPortal(
+  return createPortal(
     (
       <div>
         {focusLast}

package/src/shared/utils/config.ts

@@ -7,17 +7,53 @@ import clientGetInj from '../../client/getInj';
 import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
 import { requireWeak } from './webpack';
 
-// TODO: The internal type casting is somewhat messed up here,
-// to be corrected later.
-const config: Record<string, unknown> = (
-  IS_CLIENT_SIDE ? clientGetInj().CONFIG : requireWeak('config')
-) as (Record<string, unknown> | undefined) ?? ({} as Record<string, unknown>);
-
-// The safeguard for "document" is necessary because in non-Node environments,
-// like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
-// of other browser-world features are not available.
-if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
-  config.CSRF = parse(document.cookie).csrfToken;
+type ConfigT = Record<string, unknown>;
+
+let config: ConfigT | Promise<ConfigT> | undefined;
+
+/**
+ * Injects CSRF token into config (on client-side only).
+ *
+ * BEWARE: It mutates the argument, and also returns it as the result,
+ * for chaining.
+ */
+function injectCsrfToken(cfg: ConfigT): ConfigT {
+  // The safeguard for "document" is necessary because in non-Node environments,
+  // like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
+  // of other browser-world features are not available.
+  if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
+    // eslint-disable-next-line no-param-reassign
+    cfg.CSRF = parse(document.cookie).csrfToken;
+  }
+
+  return cfg;
 }
 
-export default config;
+export function getConfig(sync: true): ConfigT;
+
+export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT>;
+
+export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT> {
+  if (!config) {
+    if (IS_CLIENT_SIDE) {
+      const inj = clientGetInj();
+      config = inj instanceof Promise
+        ? inj.then((injection) => {
+          const res = injectCsrfToken(injection.CONFIG ?? {});
+          config = res;
+          return res;
+        })
+        : injectCsrfToken(inj.CONFIG ?? {});
+    } else {
+      const weak = requireWeak<ConfigT>('config');
+      if (!weak) throw Error('Internal error');
+      config = weak;
+    }
+  }
+
+  if (sync && (config instanceof Promise)) {
+    throw Error('The config is not available yet');
+  }
+
+  return config;
+}

package/src/shared/utils/index.ts

@@ -5,7 +5,7 @@ import themedImpl, {
   ThemeProvider,
 } from '@dr.pogodin/react-themes';
 
-import config from './config';
+import { getConfig } from './config';
 import * as isomorphy from './isomorphy';
 import time from './time';
 import * as webpack from './webpack';
@@ -36,7 +36,7 @@ themed.PRIORITY = PRIORITY;
 
 export {
   type Theme,
-  config,
+  getConfig,
   isomorphy,
   themed,
   ThemeProvider,

package/src/shared/utils/splitComponent.tsx

@@ -25,7 +25,9 @@ function getClientChunkGroups(): Promise<ChunkGroupsT> | undefined {
 
   return (async () => {
     const { default: getInj } = await import(/* webpackChunkName: "react-utils-client-side-code" */ '../../client/getInj');
-    return getInj().CHUNK_GROUPS ?? {};
+
+    const inj = await getInj();
+    return inj.CHUNK_GROUPS ?? {};
   })();
 }
 
@@ -171,6 +173,16 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
   default: ComponentType<PropsT>;
 };
 
+type GenericComponentPropsT = {
+  children?: ReactNode;
+  ref?: RefObject<unknown>;
+
+  // NOTE: This is necessary, as without it this type (with only optional
+  // fields) will be conisdered as "weak" by TypeScript, and it will be
+  // a error to assign to it any type that does not use "children", or "ref".
+  [propName: string]: unknown;
+};
+
 /**
  * Given an async component retrieval function `getComponent()` it creates
  * a special "code split" component, which uses <Suspense> to asynchronously
@@ -182,7 +194,7 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  * @return {React.ElementType}
  */
 export default function splitComponent<
-  ComponentPropsT extends { children?: ReactNode; ref?: RefObject<unknown> },
+  ComponentPropsT extends GenericComponentPropsT,
 >({
   chunkName,
   getComponent,

package/types.d.ts

@@ -4,6 +4,7 @@ declare var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
 declare var REACT_UTILS_WEBPACK_BUNDLE: boolean | undefined;
 declare var REACT_UTILS_LIBRARY_LOADED: boolean | undefined;
 declare var REACT_UTILS_FORCE_CLIENT_SIDE: boolean | undefined;
+declare var SCENE_INIT_PROMISE: Promise<void> | undefined;
 /* eslint-enable no-var */
 
 declare module '@babel/register/experimental-worker' {
@@ -19,12 +20,6 @@ declare module '@babel/register/experimental-worker' {
   export default register;
 }
 
-declare module 'node-forge/lib/forge.js' {
-  import F from 'node-forge';
-
-  export default F;
-}
-
 declare module '*.png' {
   const path: string;
   export default path;