Update Electron to 21 + Node to 16 (#1550)

.github/workflows/ci.yml

@@ -19,10 +19,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 19
+      - name: Use Node.js 20
         uses: actions/setup-node@v2
         with:
-          node-version: 19
+          node-version: 20
           cache: 'npm'
           cache-dependency-path: |
             npm-shrinkwrap.json
@@ -37,10 +37,10 @@ jobs:
     runs-on: windows-latest # Doesn't work on headless ubuntu, and is slow on mac
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 19
+      - name: Use Node.js 20
         uses: actions/setup-node@v2
         with:
-          node-version: 19
+          node-version: 20
           cache: 'npm'
           cache-dependency-path: |
             npm-shrinkwrap.json
@@ -59,8 +59,8 @@ jobs:
     strategy:
       matrix:
         node-version:
-          - '19'
-          - '12' # the oldest we require in package.json -> engines.node, to check we run on this minimum
+          - '20'
+          - '16' # the oldest we require in package.json -> engines.node, to check we run on this minimum
         platform: [ubuntu-latest, macos-latest, windows-latest]
     runs-on: ${{ matrix.platform }}
     steps:

.github/workflows/publish.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1 # Setup .npmrc file to publish to npm
         with:
-          node-version: '19' # Align the version of Node here with ci.yml.
+          node-version: '20' # Align the version of Node here with ci.yml.
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci --no-fund # Will also (via `prepare` hook): 1. install ./app, 2. build
       - run: npm run test:playwright
@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1 # Setup .npmrc file to publish to npm
         with:
-          node-version: '19' # Align the version of Node here with ci.yml.
+          node-version: '20' # Align the version of Node here with ci.yml.
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci --no-fund # Will also (via `prepare` hook): 1. install ./app, 2. build
       - run: npm run test:noplaywright

HACKING.md

@@ -127,8 +127,10 @@ When a new major [Electron release](https://github.com/electron/electron/release
    (also via the [Releases page](https://github.com/electron/electron/releases) and [the blog](https://www.electronjs.org/blog/), the content is different),
    grepping our codebase for every changed API.
    - If called for by the breaking changes, perform the necessary API changes
-3. Bump `src/constants.ts` / `DEFAULT_ELECTRON_VERSION` & `DEFAULT_CHROME_VERSION`
-   and `app / package.json / devDeps / electron`
+3. Bump
+   - `src/constants.ts` / `DEFAULT_ELECTRON_VERSION` & `DEFAULT_CHROME_VERSION`
+   - `package.json / devDeps / electron`
+   - `app / package.json / devDeps / electron`
 4. On Windows, macOS, Linux, test for regression and crashes:
    1. With `npm test` and `npm run test:manual`
    2. With extra manual testing

README.md

@@ -31,8 +31,8 @@ Whatsapp Web ([HN thread](https://news.ycombinator.com/item?id=10930718)). Nativ
 
 Install Nativefier globally with `npm install -g nativefier` . Requirements:
 
-- macOS 10.10+ / Windows / Linux
-- [Node.js](https://nodejs.org/) ≥ 12.9 and npm ≥ 6.9
+- macOS 10.13+ / Windows / Linux
+- [Node.js](https://nodejs.org/) ≥ 16.9 and npm ≥ 7.10
 
 Optional dependencies:
 

app/package.json

@@ -20,6 +20,6 @@
     "source-map-support": "^0.5.19"
   },
   "devDependencies": {
-    "electron": "^19.1.4"
+    "electron": "^21.4.4"
   }
 }

app/src/components/loginWindow.ts

@@ -19,6 +19,7 @@ export async function createLoginWindow(
     webPreferences: {
       nodeIntegration: true, // TODO work around this; insecure
       contextIsolation: false, // https://github.com/electron/electron/issues/28017
+      sandbox: false, // https://www.electronjs.org/blog/electron-20-0#default-changed-renderers-without-nodeintegration-true-are-sandboxed-by-default
     },
   });
   await loginWindow.loadURL(

app/src/helpers/windowHelpers.ts

@@ -149,6 +149,7 @@ export function getDefaultWindowOptions(
       nodeIntegration: false, // `true` is *insecure*, and cause trouble with messenger.com
       preload: path.join(__dirname, 'preload.js'),
       plugins: true,
+      sandbox: false, // https://www.electronjs.org/blog/electron-20-0#default-changed-renderers-without-nodeintegration-true-are-sandboxed-by-default
       webSecurity: !options.insecure,
       zoomFactor: options.zoom,
       // `contextIsolation` was switched to true in Electron 12, which:

package.json

@@ -7,8 +7,8 @@
   "engines_README": "Bumping the minimum required Node version? You must bump: 1. package.json -> engines.node, 2. package.json -> devDependencies.@types/node , 3. tsconfig.json -> {target, lib} , 4. .github/workflows/ci.yml -> node-version",
   "engines_READMEforEnginesNode": "Here in engines.node, we require a version as old as possible, for Nativefier to be easily installable using the stock Node.js shipped by conservative Linux distros. It's a balancing act between this, and our own dependencies requiring more a recent Node; as much as possible, try to keep supporting Debian stable; https://packages.debian.org/search?suite=stable&keywords=nodejs",
   "engines": {
-    "node": ">= 12.9.0",
-    "npm": ">= 6.9.0"
+    "node": ">= 16.16.0",
+    "npm": ">= 8.11.0"
   },
   "keywords": [
     "desktop",
@@ -77,13 +77,13 @@
     "@types/hasbin": "^1.2.0",
     "@types/jest": "^28.1.6",
     "@types/ncp": "^2.0.5",
-    "@types/node": "^12.12.6",
+    "@types/node": "^16.0.0",
     "@types/page-icon": "^0.3.4",
     "@types/tmp": "^0.2.1",
     "@types/yargs": "^17.0.10",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
-    "electron": "^19.1.4",
+    "electron": "^21.4.4",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -126,6 +126,7 @@
       ".+\\.js\\.map"
     ],
     "testRegex": "test\\.js",
+    "testTimeout": 15000,
     "watchPathIgnorePatterns": [
       "<rootDir>/app/lib.*",
       "<rootDir>/app/src.*",

src/constants.ts

@@ -6,20 +6,20 @@ export const DEFAULT_APP_NAME = 'APP';
 //   - upgrade app / package.json / "devDependencies" / "electron"
 //   - upgrade       package.json / "devDependencies" / "electron"
 // Doing a *major* upgrade? Read https://github.com/nativefier/nativefier/blob/master/HACKING.md#deps-major-upgrading-electron
-export const DEFAULT_ELECTRON_VERSION = '19.1.4';
+export const DEFAULT_ELECTRON_VERSION = '21.4.4';
 // https://atom.io/download/atom-shell/index.json
 // https://www.electronjs.org/releases/stable
-export const DEFAULT_CHROME_VERSION = '102.0.5005.167';
+export const DEFAULT_CHROME_VERSION = '106.0.5249.199';
 
 // Update each of these periodically
 // https://product-details.mozilla.org/1.0/firefox_versions.json
-export const DEFAULT_FIREFOX_VERSION = '106.0.5';
+export const DEFAULT_FIREFOX_VERSION = '116.0';
 
 // https://en.wikipedia.org/wiki/Safari_version_history
 export const DEFAULT_SAFARI_VERSION = {
-  majorVersion: 15,
-  version: '15.6.1',
-  webkitVersion: '613.2.7',
+  majorVersion: 65,
+  version: '16.5.2',
+  webkitVersion: '605.1.15',
 };
 
 export const ELECTRON_MAJOR_VERSION = parseInt(

src/options/fields/userAgent.test.ts

@@ -78,7 +78,7 @@ test('short userAgent parameter is passed with an electronVersion', async () =>
   );
 
   const params = {
-    packager: { electronVersion: '12.0.0', platform: 'darwin' },
+    packager: { electronVersion: '16.0.0', platform: 'darwin' },
     nativefier: { userAgent: 'edge' },
   };
 
@@ -86,5 +86,5 @@ test('short userAgent parameter is passed with an electronVersion', async () =>
 
   expect(parsedUserAgent).not.toBe(params.nativefier.userAgent);
   expect(parsedUserAgent).toContain('102.0.0');
-  expect(getChromeVersionForElectronVersion).toHaveBeenCalledWith('12.0.0');
+  expect(getChromeVersionForElectronVersion).toHaveBeenCalledWith('16.0.0');
 });

src/playwright-test.ts

@@ -312,7 +312,7 @@ describe('Application launch', () => {
         // which isn't particularly useful
         expect({
           message: 'console.error called unexpectedly with',
-          consoleMessage,
+          consoleMessage: { ...consoleMessage },
         }).toBeUndefined();
       }
     });
@@ -322,9 +322,9 @@ describe('Application launch', () => {
 
   test('basic auth', async () => {
     const mainWindow = (await spawnApp({
-      targetUrl: 'http://httpbin.org/basic-auth/foo/bar',
-      basicAuthUsername: 'foo',
-      basicAuthPassword: 'bar',
+      targetUrl: 'https://authenticationtest.com/HTTPAuth/',
+      basicAuthUsername: 'user',
+      basicAuthPassword: 'pass',
     })) as Page;
     await mainWindow.waitForLoadState('networkidle');
 
@@ -332,20 +332,31 @@ describe('Application launch', () => {
       'document.documentElement.innerText',
     );
 
-    const documentJSON = JSON.parse(documentText) as {
-      authenticated: boolean;
-      user: string;
-    };
+    expect(documentText).toContain('Success');
 
-    expect(documentJSON).toEqual({
-      authenticated: true,
-      user: 'foo',
+    expect(documentText).not.toContain('Failure');
   });
+
+  test('basic auth - bad login', async () => {
+    const mainWindow = (await spawnApp({
+      targetUrl: 'https://authenticationtest.com/HTTPAuth/',
+      basicAuthUsername: 'userbad',
+      basicAuthPassword: 'passbad',
+    })) as Page;
+    await mainWindow.waitForLoadState('networkidle');
+
+    const documentText = await mainWindow.evaluate<string>(
+      'document.documentElement.innerText',
+    );
+
+    expect(documentText).not.toContain('Success');
+
+    expect(documentText).toContain('Failure');
   });
 
   test('basic auth without pre-providing', async () => {
     const mainWindow = (await spawnApp({
-      targetUrl: 'http://httpbin.org/basic-auth/foo/bar',
+      targetUrl: 'https://authenticationtest.com/HTTPAuth/',
     })) as Page;
     await mainWindow.waitForLoadState('load');
 
@@ -363,11 +374,11 @@ describe('Application launch', () => {
 
     const usernameField = await loginWindow.$('#username-input');
     expect(usernameField).not.toBeNull();
-    await usernameField?.fill('foo');
+    await usernameField?.fill('user');
 
     const passwordField = await loginWindow.$('#password-input');
     expect(passwordField).not.toBeNull();
-    await passwordField?.fill('bar');
+    await passwordField?.fill('pass');
 
     const submitButton = await loginWindow.$('#submit-form-button');
     expect(submitButton).not.toBeNull();
@@ -387,15 +398,9 @@ describe('Application launch', () => {
       'document.documentElement.innerText',
     );
 
-    const documentJSON = JSON.parse(documentText) as {
-      authenticated: boolean;
-      user: string;
-    };
+    expect(documentText).toContain('Success');
 
-    expect(documentJSON).toEqual({
-      authenticated: true,
-      user: 'foo',
-    });
+    expect(documentText).not.toContain('Failure');
   });
 });