@govtechsg/oobee 0.10.83 → 0.10.85

package/src/crawlers/custom/utils.ts

@@ -1,8 +1,8 @@
-/* eslint-disable no-shadow */
 /* eslint-disable no-alert */
 /* eslint-disable no-param-reassign */
 /* eslint-env browser */
 import path from 'path';
+import { getDomain } from 'tldts';
 import { runAxeScript } from '../commonCrawlerFunc.js';
 import { consoleLogger, guiInfoLog, silentLogger } from '../../logs.js';
 import { guiInfoStatusTypes } from '../../constants/constants.js';
@@ -19,6 +19,44 @@ declare global {
   }
 }
 
+const sameRegistrableDomain = (hostA: string, hostB: string) => {
+  const domainA = getDomain(hostA);
+  const domainB = getDomain(hostB);
+
+  if (!domainA || !domainB) return hostA === hostB;
+
+  return domainA === domainB;
+};
+
+const parseBoolEnv = (val: string | undefined, defaultVal: boolean) => {
+  if (val == null) return defaultVal;
+  const v = String(val).trim().toLowerCase();
+  if (['1', 'true', 'yes', 'y', 'on'].includes(v)) return true;
+  if (['0', 'false', 'no', 'n', 'off'].includes(v)) return false;
+  return defaultVal;
+};
+
+const RESTRICT_OVERLAY_TO_ENTRY_DOMAIN = parseBoolEnv(
+  process.env.RESTRICT_OVERLAY_TO_ENTRY_DOMAIN,
+  false,
+);
+
+const isOverlayAllowed = (currentUrl: string, entryUrl: string) => {
+  try {
+    const cur = new URL(currentUrl);
+
+    if (cur.protocol !== 'http:' && cur.protocol !== 'https:') return false;
+
+    if (!RESTRICT_OVERLAY_TO_ENTRY_DOMAIN) return true;
+
+    const base = new URL(entryUrl);
+
+    return sameRegistrableDomain(cur.hostname, base.hostname);
+  } catch {
+    return false;
+  }
+};
+
 //! For Cypress Test
 // env to check if Cypress test is running
 const isCypressTest = process.env.IS_CYPRESS_TEST === 'true';
@@ -67,10 +105,7 @@ export const screenshotFullPage = async (page, screenshotsDir: string, screensho
           setTimeout(async () => {
             await page.waitForLoadState('domcontentloaded');
 
-            const newHeight = await page.evaluate(
-              // eslint-disable-next-line no-shadow
-              () => document.body.scrollHeight,
-            );
+            const newHeight = await page.evaluate(() => document.body.scrollHeight);
             const result = newHeight > prevHeight;
 
             resolve(result);
@@ -248,7 +283,7 @@ export const updateMenu = async (page, urlsCrawled) => {
   log(`Overlay menu: updating: ${page.url()}`);
   await page.evaluate(
     vars => {
-      const shadowHost = document.querySelector('#oobee-shadow-host');
+      const shadowHost = document.querySelector('#oobeeShadowHost');
       if (shadowHost) {
         const p = shadowHost.shadowRoot.querySelector('#oobee-p-pages-scanned');
         if (p) {
@@ -262,7 +297,6 @@ export const updateMenu = async (page, urlsCrawled) => {
   consoleLogger.info(`Overlay menu updated`);
 };
 
-
 export const addOverlayMenu = async (
   page,
   urlsCrawled,
@@ -307,7 +341,7 @@ export const addOverlayMenu = async (
         `;
         minBtn.innerHTML = MINBTN_SVG;
 
-        let currentPos: 'LEFT' | 'RIGHT' = (vars.menuPos || 'RIGHT');
+        let currentPos: 'LEFT' | 'RIGHT' = vars.menuPos || 'RIGHT';
         const isCollapsed = () => panel.classList.contains('collapsed');
 
         const setPosClass = (pos: 'LEFT' | 'RIGHT') => {
@@ -325,7 +359,7 @@ export const addOverlayMenu = async (
         };
 
         const toggleCollapsed = (force?: boolean) => {
-          const willCollapse = (typeof force === 'boolean') ? force : !isCollapsed();
+          const willCollapse = typeof force === 'boolean' ? force : !isCollapsed();
           if (willCollapse) {
             panel.classList.add('collapsed');
             localStorage.setItem('oobee:overlay-collapsed', '1');
@@ -414,13 +448,13 @@ export const addOverlayMenu = async (
           const ol = document.createElement('ol');
           ol.className = 'oobee-ol';
 
-          scanned.forEach((item) => {
+          scanned.forEach(item => {
             const li = document.createElement('li');
             li.className = 'oobee-li';
 
             const title = document.createElement('div');
             title.className = 'oobee-item-title';
-            title.textContent = (item.pageTitle && item.pageTitle.trim()) ? item.pageTitle : item.url;
+            title.textContent = item.pageTitle && item.pageTitle.trim() ? item.pageTitle : item.url;
 
             const url = document.createElement('div');
             url.className = 'oobee-item-url';
@@ -730,8 +764,7 @@ export const addOverlayMenu = async (
 
           const closed = isCollapsed();
           const arrowPointsRight =
-            (currentPos === 'RIGHT' && !closed) ||
-            (currentPos === 'LEFT'  &&  closed);
+            (currentPos === 'RIGHT' && !closed) || (currentPos === 'LEFT' && closed);
 
           icon.classList.toggle('is-left', !arrowPointsRight);
           minBtn.setAttribute('aria-label', closed ? 'Expand panel' : 'Collapse panel');
@@ -761,11 +794,11 @@ export const addOverlayMenu = async (
 
         grip.addEventListener('pointerdown', (e: PointerEvent) => {
           startX = e.clientX;
-          grip.setPointerCapture(e.pointerId);       // <-- use the button
+          grip.setPointerCapture(e.pointerId); // <-- use the button
         });
 
         grip.addEventListener('pointermove', (e: PointerEvent) => {
-          if (!grip.hasPointerCapture?.(e.pointerId)) return;  // <-- check the button
+          if (!grip.hasPointerCapture?.(e.pointerId)) return; // <-- check the button
           const dx = e.clientX - startX;
           if (Math.abs(dx) >= THRESH) {
             const nextPos: 'LEFT' | 'RIGHT' = dx < 0 ? 'LEFT' : 'RIGHT';
@@ -779,7 +812,9 @@ export const addOverlayMenu = async (
         });
 
         grip.addEventListener('pointerup', (e: PointerEvent) => {
-          try { grip.releasePointerCapture(e.pointerId); } catch {}
+          try {
+            grip.releasePointerCapture(e.pointerId);
+          } catch {}
         });
 
         const stopDialog = document.createElement('dialog');
@@ -791,7 +826,7 @@ export const addOverlayMenu = async (
           borderRadius: '16px',
           overflow: 'hidden',
           boxShadow: '0 10px 40px rgba(0,0,0,.35)',
-          fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
+          fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
         });
         const dialogSheet = new CSSStyleSheet();
         dialogSheet.replaceSync(`
@@ -829,13 +864,18 @@ export const addOverlayMenu = async (
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          gap: '8px'
+          gap: '8px',
         });
 
         const title = document.createElement('h2');
         title.id = 'oobee-stop-title';
         title.textContent = 'Are you sure you want to stop this scan?';
-        Object.assign(title.style, { margin: '0', fontSize: '22px', fontWeight: '700', lineHeight: '1.25' });
+        Object.assign(title.style, {
+          margin: '0',
+          fontSize: '22px',
+          fontWeight: '700',
+          lineHeight: '1.25',
+        });
 
         const closeX = document.createElement('button');
         closeX.type = 'button';
@@ -853,14 +893,14 @@ export const addOverlayMenu = async (
           height: '36px',
           borderRadius: '12px',
           display: 'grid',
-          placeItems: 'center'
+          placeItems: 'center',
         });
         head.appendChild(title);
         head.appendChild(closeX);
 
         const bodyWrap = document.createElement('div');
         Object.assign(bodyWrap.style, {
-          padding: '12px 20px 20px 20px'
+          padding: '12px 20px 20px 20px',
         });
 
         const form = document.createElement('form');
@@ -869,7 +909,7 @@ export const addOverlayMenu = async (
         Object.assign(form.style, {
           display: 'grid',
           gridTemplateColumns: '1fr',
-          rowGap: '12px'
+          rowGap: '12px',
         });
 
         const label = document.createElement('label');
@@ -887,7 +927,7 @@ export const addOverlayMenu = async (
           padding: '12px 14px',
           fontSize: '14px',
           outline: 'none',
-          boxSizing: 'border-box'
+          boxSizing: 'border-box',
         });
         input.addEventListener('focus', () => {
           input.style.borderColor = '#7b4dff';
@@ -913,7 +953,7 @@ export const addOverlayMenu = async (
           fontWeight: '600',
           color: '#fff',
           background: '#9021A6',
-          cursor: 'pointer'
+          cursor: 'pointer',
         });
 
         const cancel = document.createElement('button');
@@ -926,7 +966,7 @@ export const addOverlayMenu = async (
           fontSize: '14px',
           justifySelf: 'center',
           cursor: 'pointer',
-          padding: '6px'
+          padding: '6px',
         });
 
         actions.appendChild(primary);
@@ -936,7 +976,7 @@ export const addOverlayMenu = async (
           form.appendChild(label);
           form.appendChild(input);
         }
-         form.appendChild(actions);
+        form.appendChild(actions);
         bodyWrap.appendChild(form);
 
         stopDialog.appendChild(head);
@@ -944,17 +984,27 @@ export const addOverlayMenu = async (
         shadowRoot.appendChild(stopDialog);
 
         let stopResolver: null | ((v: { confirmed: boolean; label: string }) => void) = null;
-        const hideStop = () => { try { stopDialog.close(); } catch {} stopResolver = null; };
+        const hideStop = () => {
+          try {
+            stopDialog.close();
+          } catch {}
+          stopResolver = null;
+        };
         const showStop = () => {
           if (!shouldHideInput) input.value = '';
-          try { stopDialog.showModal(); } catch {}
+          try {
+            stopDialog.showModal();
+          } catch {}
           if (!shouldHideInput) {
             requestAnimationFrame(() => {
-              try { input.focus({ preventScroll: true }); input.select(); } catch {}
+              try {
+                input.focus({ preventScroll: true });
+                input.select();
+              } catch {}
             });
           }
         };
-        form.addEventListener('submit', (e) => {
+        form.addEventListener('submit', e => {
           e.preventDefault();
           const v = (input.value || '').trim();
           if (stopResolver) stopResolver({ confirmed: true, label: v });
@@ -968,13 +1018,13 @@ export const addOverlayMenu = async (
           if (stopResolver) stopResolver({ confirmed: false, label: '' });
           hideStop();
         });
-        stopDialog.addEventListener('cancel', (e) => {
+        stopDialog.addEventListener('cancel', e => {
           e.preventDefault();
           if (stopResolver) stopResolver({ confirmed: false, label: '' });
           hideStop();
         });
         (customWindow as Window).oobeeShowStopModal = () =>
-          new Promise<{ confirmed: boolean; label: string }>((resolve) => {
+          new Promise<{ confirmed: boolean; label: string }>(resolve => {
             stopResolver = resolve;
             showStop();
           });
@@ -1000,7 +1050,7 @@ export const addOverlayMenu = async (
       log('Overlay menu: successfully added');
     })
     .catch(error => {
-      error('Overlay menu: failed to add', error);
+      consoleLogger.error('Overlay menu: failed to add', error);
     });
 };
 
@@ -1027,7 +1077,7 @@ export const initNewPage = async (page, pageClosePromises, processPageParams, pa
   // eslint-disable-next-line no-underscore-dangle
   const pageId = page._guid;
 
-  page.on('dialog', () => { });
+  page.on('dialog', () => {});
 
   const pageClosePromise = new Promise(resolve => {
     page.on('close', () => {
@@ -1058,11 +1108,18 @@ export const initNewPage = async (page, pageClosePromises, processPageParams, pa
       await processPage(page, processPageParams);
       log('Scan: success');
       pagesDict[pageId].isScanning = false;
-       await addOverlayMenu(page, processPageParams.urlsCrawled, menuPos, {
-         inProgress: false,
-         collapsed: !!pagesDict[pageId]?.collapsed,
-         hideStopInput: !!processPageParams.customFlowLabel,
-       });
+
+      const allowed = isOverlayAllowed(page.url(), processPageParams.entryUrl);
+
+      if (allowed) {
+        await addOverlayMenu(page, processPageParams.urlsCrawled, menuPos, {
+          inProgress: false,
+          collapsed: !!pagesDict[pageId]?.collapsed,
+          hideStopInput: !!processPageParams.customFlowLabel,
+        });
+      } else {
+        await removeOverlayMenu(page);
+      }
     } catch (error) {
       log(`Scan failed ${error}`);
     }
@@ -1126,6 +1183,13 @@ export const initNewPage = async (page, pageClosePromises, processPageParams, pa
 
   page.on('domcontentloaded', async () => {
     try {
+      const allowed = isOverlayAllowed(page.url(), processPageParams.entryUrl);
+
+      if (!allowed) {
+        await removeOverlayMenu(page);
+        return;
+      }
+
       const existingOverlay = await page.evaluate(() => {
         return document.querySelector('#oobeeShadowHost');
       });
@@ -1141,12 +1205,6 @@ export const initNewPage = async (page, pageClosePromises, processPageParams, pa
         });
       }
 
-      setTimeout(() => {
-        // Timeout here to slow things down a little
-      }, 1000);
-
-      //! For Cypress Test
-      // Auto-clicks 'Scan this page' button only once
       if (isCypressTest) {
         try {
           await handleOnScanClick();
@@ -1155,11 +1213,8 @@ export const initNewPage = async (page, pageClosePromises, processPageParams, pa
           consoleLogger.info(`Error in calling handleOnScanClick, isCypressTest: ${isCypressTest}`);
         }
       }
-
-      consoleLogger.info(`Overlay state: ${existingOverlay}`);
     } catch {
       consoleLogger.info('Error in adding overlay menu to page');
-      consoleLogger.info('Error in adding overlay menu to page');
     }
   });
 

package/src/crawlers/runCustom.ts

@@ -11,6 +11,7 @@ import { DEBUG, initNewPage, log } from './custom/utils.js';
 import { guiInfoLog } from '../logs.js';
 import { ViewportSettingsClass } from '../combine.js';
 import { addUrlGuardScript } from './guards/urlGuard.js';
+import { getPlaywrightLaunchOptions } from '../constants/common.js';
 
 // Export of classes
 
@@ -24,6 +25,8 @@ export class ProcessPageParams {
   randomToken: string;
   customFlowLabel?: string;
   stopAll?: () => Promise<void>;
+  entryUrl!: string;
+  strategy: string;
 
   constructor(
     scannedIdx: number,
@@ -68,6 +71,8 @@ const runCustom = async (
     randomToken,
   );
 
+  processPageParams.entryUrl = url;
+
   if (initialCustomFlowLabel && initialCustomFlowLabel.trim()) {
     processPageParams.customFlowLabel = initialCustomFlowLabel.trim();
   }
@@ -79,11 +84,20 @@ const runCustom = async (
     const deviceConfig = viewportSettings.playwrightDeviceDetailsObject;
     const hasCustomViewport = !!deviceConfig;
 
+    const baseLaunchOptions = getPlaywrightLaunchOptions();
+
+    // Merge base args with custom flow specific args
+    const baseArgs = baseLaunchOptions.args || [];
+    const customArgs = hasCustomViewport ? ['--window-size=1920,1040'] : ['--start-maximized'];
+    const mergedArgs = [
+      ...baseArgs.filter(a => !a.startsWith('--window-size') && a !== '--start-maximized'),
+      ...customArgs,
+    ];
+
     const browser = await chromium.launch({
-      args: hasCustomViewport ? ['--window-size=1920,1040'] : ['--start-maximized'],
+      ...baseLaunchOptions,
+      args: mergedArgs,
       headless: false,
-      channel: 'chrome',
-      // bypassCSP: true,
     });
 
     const context = await browser.newContext({
@@ -99,8 +113,7 @@ const runCustom = async (
       try {
         await context.close().catch(() => {});
         await browser.close().catch(() => {});
-      } catch {
-      }
+      } catch {}
     };
 
     // For handling closing playwright browser and continue generate artifacts etc

package/src/mergeAxeResults/itemReferences.ts

@@ -0,0 +1,62 @@
+import type { AllIssues, ItemsInfo, RuleInfo } from './types.js';
+
+/**
+ * Builds pre-computed HTML groups to optimize Group by HTML Element functionality.
+ * Keys are composite "html\x00xpath" strings to ensure unique matching per element instance.
+ */
+export const buildHtmlGroups = (rule: RuleInfo, items: ItemsInfo[], pageUrl: string) => {
+  if (!rule.htmlGroups) {
+    rule.htmlGroups = {};
+  }
+
+  items.forEach(item => {
+    // Use composite key of html + xpath for precise matching
+    const htmlKey = `${item.html || 'No HTML element'}\x00${item.xpath || ''}`;
+
+    if (!rule.htmlGroups![htmlKey]) {
+      // Create new group with the first occurrence
+      rule.htmlGroups![htmlKey] = {
+        html: item.html || '',
+        xpath: item.xpath || '',
+        message: item.message || '',
+        screenshotPath: item.screenshotPath || '',
+        displayNeedsReview: item.displayNeedsReview,
+        pageUrls: [],
+      };
+    }
+
+    if (!rule.htmlGroups![htmlKey].pageUrls.includes(pageUrl)) {
+      rule.htmlGroups![htmlKey].pageUrls.push(pageUrl);
+    }
+  });
+};
+
+/**
+ * Converts items in pagesAffected to references (html\x00xpath composite keys) for embedding in HTML report.
+ * Additionally, it deep-clones allIssues, replaces page.items objects with composite reference keys.
+ * Those refs are specifically for htmlGroups lookup (html + xpath).
+ */
+export const convertItemsToReferences = (allIssues: AllIssues): AllIssues => {
+  const cloned = JSON.parse(JSON.stringify(allIssues));
+
+  ['mustFix', 'goodToFix', 'needsReview', 'passed'].forEach(category => {
+    if (!cloned.items[category]?.rules) return;
+
+    cloned.items[category].rules.forEach((rule: any) => {
+      if (!rule.pagesAffected || !rule.htmlGroups) return;
+
+      rule.pagesAffected.forEach((page: any) => {
+        if (!page.items) return;
+
+        page.items = page.items.map((item: any) => {
+          if (typeof item === 'string') return item; // Already a reference
+          // Use composite key matching buildHtmlGroups
+          const htmlKey = `${item.html || 'No HTML element'}\x00${item.xpath || ''}`;
+          return htmlKey;
+        });
+      });
+    });
+  });
+
+  return cloned;
+};