feat: Replace useragent with ua-parser-js to address security vulnerability

Replaced the deprecated 'useragent' package with 'ua-parser-js' to resolve the 'tmp' package security vulnerability reported by 'npm audit'.

- Uninstalled 'useragent' and '@types/useragent'.
- Installed 'ua-parser-js'.
- Updated 'src/hot-reload/HotReloaderServer.ts' to use 'UAParser' for user agent parsing.
- Updated 'src/hot-reload/SignEmitter.ts' to use 'UAParser.IResult' and extract browser information.
- Refactored 'specs/SignEmitter.specs.ts' to align with 'ua-parser-js' types and 'SignEmitter' constructor changes.

Author: NERDHEAD-lab

package.json

@@ -58,7 +58,7 @@
     "json5": "^2.2.3",
     "lodash": "^4.17.21",
     "minimist": "^1.2.8",
-    "useragent": "^2.3.0",
+    "ua-parser-js": "^2.0.4",
     "webextension-polyfill": "^0.12.0",
     "webpack-sources": "^3.2.3",
     "ws": "^8.14.2"
@@ -80,7 +80,6 @@
     "@types/minimist": "1.2.5",
     "@types/mocha": "10.0.9",
     "@types/sinon": "17.0.3",
-    "@types/useragent": "2.3.4",
     "@types/ws": "8.5.12",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",

specs/SignEmitter.specs.ts

@@ -1,6 +1,5 @@
 import { assert } from 'chai';
 import { SinonSpy, spy } from 'sinon';
-import { Agent } from 'useragent';
 import SignEmitter from '../src/hot-reload/SignEmitter';
 import * as blockProtection from '../src/utils/block-protection';
 import * as logger from '../src/utils/logger';
@@ -16,7 +15,7 @@ import {
 
 describe('SignEmitter', () => {
   let mockedServer: any;
-  let mockedAgent: Partial<Agent>;
+  let mockedBrowserInfo: { name: string; version: string; };
   let debounceSpy: SinonSpy;
   let warnSpy: SinonSpy;
   let fastReloadBlockerSpy: SinonSpy;
@@ -25,7 +24,7 @@ describe('SignEmitter', () => {
     mockedServer = {
       clients: [],
     };
-    mockedAgent = { family: 'Chrome', major: '0', minor: '0', patch: '0' };
+    mockedBrowserInfo = { name: 'Chrome', version: '0.0.0' };
     debounceSpy = spy(blockProtection, 'debounceSignal');
     warnSpy = spy(logger, 'warn');
     fastReloadBlockerSpy = spy(blockProtection, 'fastReloadBlocker');
@@ -38,7 +37,7 @@ describe('SignEmitter', () => {
 
   it('Should setup signal debounce as fast reload blocker to avoid extension blocking', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const emitter = new SignEmitter(mockedServer, mockedAgent as Agent);
+    const emitter = new SignEmitter(mockedServer, mockedBrowserInfo);
 
     assert(debounceSpy.calledWith(FAST_RELOAD_DEBOUNCING_FRAME));
     assert(fastReloadBlockerSpy.calledWith(FAST_RELOAD_CALLS, FAST_RELOAD_WAIT));
@@ -48,13 +47,11 @@ describe('SignEmitter', () => {
     const [major, minor, patch] = NEW_FAST_RELOAD_CHROME_VERSION;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const emitter = new SignEmitter(mockedServer, {
-      family: 'Chrome',
-      major: `${major}`,
-      minor: `${minor}`,
-      patch: `${patch}`,
-    } as Agent);
+      name: 'Chrome',
+      version: `${major}.${minor}.${patch}`,
+    });
 
     assert(debounceSpy.calledWith(NEW_FAST_RELOAD_DEBOUNCING_FRAME));
     assert(fastReloadBlockerSpy.calledWith(NEW_FAST_RELOAD_CALLS, FAST_RELOAD_WAIT));
   });
-});
+});

src/hot-reload/HotReloaderServer.ts

@@ -1,4 +1,4 @@
-import { parse } from 'useragent';
+import { UAParser } from 'ua-parser-js';
 import { Server } from 'ws';
 import { info } from '../utils/logger';
 import SignEmitter from './SignEmitter';
@@ -14,10 +14,10 @@ export default class HotReloaderServer {
 
   public listen() {
     this._server.on('connection', (ws, msg) => {
-      const userAgent = parse(msg.headers['user-agent']);
-      this._signEmitter = new SignEmitter(this._server, userAgent);
+      const userAgent = new UAParser(msg.headers['user-agent']).getResult();
+      this._signEmitter = new SignEmitter(this._server, userAgent.browser);
 
-      ws.on('message', (data: string) => info(`Message from ${userAgent.family}: ${JSON.parse(data).payload}`));
+      ws.on('message', (data: string) => info(`Message from ${userAgent.browser.name}: ${JSON.parse(data).payload}`));
       ws.on('error', () => {
         // NOOP - swallow socket errors due to http://git.io/vbhSN
       });

src/hot-reload/SignEmitter.ts

@@ -1,5 +1,5 @@
 import { zip } from 'lodash';
-import { Agent } from 'useragent';
+import { UAParser } from 'ua-parser-js';
 import { OPEN, Server } from 'ws';
 
 import {
@@ -13,6 +13,11 @@ import {
 import { debounceSignal, fastReloadBlocker } from '../utils/block-protection';
 import { signChange } from '../utils/signals';
 
+interface MinimalBrowserInfo {
+  name?: string;
+  version?: string;
+}
+
 export default class SignEmitter {
   private _safeSignChange: (
     reloadPage: boolean,
@@ -23,11 +28,13 @@ export default class SignEmitter {
 
   private _server: Server;
 
-  constructor(server: Server, { family, major, minor, patch }: Agent) {
+  constructor(server: Server, { name, version }: MinimalBrowserInfo) {
     this._server = server;
-    if (family === 'Chrome') {
+    if (name === 'Chrome') {
+      const [major, minor, patch] = (version || '').split('.').map(v => parseInt(v, 10));
+
       const [reloadCalls, reloadDeboucingFrame] = this._satisfies(
-        [parseInt(major, 10), parseInt(minor, 10), parseInt(patch, 10)],
+        [major, minor, patch],
         NEW_FAST_RELOAD_CHROME_VERSION,
       )
         ? [NEW_FAST_RELOAD_CALLS, NEW_FAST_RELOAD_DEBOUNCING_FRAME]