Merge pull request #50 from shriyanss/dev

v1.2.1-beta.2

### Added

- Added tabular view to the report

### Changed

- The run module will skip the target if it is invalid, rather than exiting the program

### Fixed

- Fix "Attempted to use detached Frame" error by adding try-catch block
- Fix "Cannot read properties of undefined (reading 'split')" error in openapi generator by adding try catch

Author: shriyanss

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 1.2.1-beta.2 - 2025.08.10
+
+### Added
+
+- Added tabular view to the report
+
+### Changed
+
+- The run module will skip the target if it is invalid, rather than exiting the program
+
+### Fixed
+
+- Fix "Attempted to use detached Frame" error by adding try-catch block
+- Fix "Cannot read properties of undefined (reading 'split')" error in openapi generator by adding try catch
+
 ## 1.2.1-beta.1 - 2025.08.07
 
 ### Added

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@shriyanss/js-recon",
-    "version": "1.2.1-beta.1",
+    "version": "1.2.1-beta.2",
     "description": "JS Recon Tool",
     "main": "build/index.js",
     "type": "module",
@@ -29,6 +29,8 @@
         "cheerio": "^1.0.0",
         "cli-highlight": "^2.1.11",
         "commander": "^14.0.0",
+        "datatables.net": "^2.3.2",
+        "datatables.net-dt": "^2.3.2",
         "esquery": "^1.6.0",
         "fs": "^0.0.2",
         "highlight.js": "^11.11.1",

package.json

@@ -1,6 +1,6 @@
 const githubURL = "https://github.com/shriyanss/js-recon";
 const modulesDocs = "https://js-recon.io/docs/category/modules";
-const version = "1.2.1-beta.1";
+const version = "1.2.1-beta.2";
 const toolDesc = "JS Recon Tool";
 const axiosNonHttpMethods = ["isAxiosError"]; // methods available in axios, which are not for making HTTP requests
 

src/globalConfig.ts

@@ -172,16 +172,22 @@ const frameworkDetect = async (url: string) => {
         args: process.env.IS_DOCKER === "true" ? ["--no-sandbox"] : [],
     });
     const page = await browser.newPage();
+    page.setDefaultNavigationTimeout(30000);
+    let pageSource = "";
     try {
         await page.goto(url, {
-            waitUntil: "networkidle0",
+            waitUntil: "domcontentloaded",
+            timeout: 30000,
         });
+        // Give client-side frameworks a brief window to render
+        await page.waitForSelector("html", { timeout: 10000 }).catch(() => {});
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        pageSource = await page.content();
     } catch (err) {
-        console.log(chalk.yellow("[!] Page load timed out, but continuing with current state"));
+        console.log(chalk.yellow("[!] Page navigation/content failed, falling back to fetch response if available"));
+    } finally {
+        await browser.close().catch(() => {});
     }
-    await new Promise((resolve) => setTimeout(resolve, 5000));
-    const pageSource = await page.content();
-    await browser.close();
 
     // if (res === null || res === undefined) {
     //   return;

src/lazyLoad/techDetect/index.ts

@@ -0,0 +1,147 @@
+import Database from "better-sqlite3";
+import hljs from "highlight.js";
+
+interface AnalysisFinding {
+    ruleId: string;
+    ruleName: string;
+    ruleType: string;
+    ruleDescription: string;
+    ruleAuthor: string;
+    ruleTech: string;
+    severity: string;
+    message: string;
+    findingLocation: string;
+}
+
+interface MappedData {
+    id: string;
+    description: string | null;
+    containsFetch: number;
+    isAxiosClient: number;
+    exports: string | null;
+    imports: string | null;
+    file: string;
+}
+
+const escapeHtml = (value: unknown): string => {
+    const str = value === null || value === undefined ? "" : String(value);
+    return str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+};
+
+const booleanIcon = (b: number | boolean) => (b ? "✅" : "❌");
+
+// Map severity to a sortable rank: info < low < medium < high
+const severityRank = (sev: string): number => {
+    const s = (sev || "").toString().toLowerCase().trim();
+    switch (s) {
+        case "info":
+            return 0;
+        case "low":
+            return 1;
+        case "medium":
+            return 2;
+        case "high":
+            return 3;
+        default:
+            return 99; // unknown values sort last
+    }
+};
+
+// Render JS code with highlight.js inside a pre/code block
+const renderJsCode = (code: string | null | undefined): string => {
+    const src = code ?? "";
+    try {
+        const highlighted = hljs.highlight(src, { language: "javascript", ignoreIllegals: true }).value;
+        return `<pre class="code-cell"><code class="hljs language-javascript">${highlighted}</code></pre>`;
+    } catch {
+        // Fallback to escaped plain text
+        return `<pre class="code-cell">${escapeHtml(src)}</pre>`;
+    }
+};
+
+const genDataTablesPage = (db: Database.Database): string => {
+    const findings = db.prepare(`SELECT * FROM analysis_findings`).all() as AnalysisFinding[];
+    const mapped = db.prepare(`SELECT * FROM mapped`).all() as MappedData[];
+
+    const findingsRows = findings
+        .map(
+            (f) => `
+            <tr>
+                <td>${escapeHtml(f.ruleId)}</td>
+                <td>${escapeHtml(f.ruleName)}</td>
+                <td>${escapeHtml(f.ruleType)}</td>
+                <td>${escapeHtml(f.ruleDescription)}</td>
+                <td>${escapeHtml(f.ruleAuthor)}</td>
+                <td>${escapeHtml(f.ruleTech)}</td>
+                <td data-order="${severityRank(f.severity)}">${escapeHtml(f.severity)}</td>
+                <td>${escapeHtml(f.message)}</td>
+                <td>${renderJsCode(f.findingLocation)}</td>
+            </tr>`
+        )
+        .join("\n");
+
+    const mappedRows = mapped
+        .map(
+            (m) => `
+            <tr>
+                <td>${escapeHtml(m.id)}</td>
+                <td>${escapeHtml(m.description)}</td>
+                <td>${booleanIcon(m.containsFetch)}</td>
+                <td>${booleanIcon(m.isAxiosClient)}</td>
+                <td>${escapeHtml(m.exports)}</td>
+                <td>${escapeHtml(m.imports)}</td>
+                <td>${escapeHtml(m.file)}</td>
+            </tr>`
+        )
+        .join("\n");
+
+    const html = `
+    <section>
+      <h2>Analyze Findings (Sortable)</h2>
+      <table id="findings-table" class="display data-table" style="width:100%">
+        <thead>
+          <tr>
+            <th>Rule ID</th>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Author</th>
+            <th>Tech</th>
+            <th>Severity</th>
+            <th>Message</th>
+            <th>Location</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${findingsRows}
+        </tbody>
+      </table>
+
+      <h2 style="margin-top: 2rem;">Mapped Data (Sortable)</h2>
+      <table id="mapped-table" class="display data-table" style="width:100%">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Description</th>
+            <th>Contains Fetch</th>
+            <th>Axios Client</th>
+            <th>Exports</th>
+            <th>Imports</th>
+            <th>File</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${mappedRows}
+        </tbody>
+      </table>
+    </section>`;
+
+    return html;
+};
+
+export default genDataTablesPage;