The automatically opened report executes unpinned third-party CDN scripts with Mermaid's loose security mode
Source references: 4The template loads a floating script from cdn.tailwindcss.com and Mermaid from jsDelivr pinned only to major version 11; both execute when the report opens. Mermaid is configured with securityLevel: "loose". Repository content feeds the diagrams and report, but the instructions do not require escaping text inserted into HTML or Mermaid.
If CDN content is altered, its supply chain is compromised, or version behavior changes, third-party code could read the report DOM—including file names and architecture findings—and make network requests. Malicious repository text inserted without escaping could also produce active content or a deceptive report under loose mode.
The report must be opened automatically, at which point the browser executes code from two third-party CDNs. Tailwind is unversioned, Mermaid is pinned only to major version 11, and Mermaid uses a permissive security mode. If CDN content is replaced, or repository text enters HTML/Mermaid without escaping, code or crafted content could run with the report page's browser permissions. The source does not prove that repository text is actually left unescaped, so that part is conditional. Users can ask for fully pinned resources with integrity checks, local static assets, strict mode and explicit escaping, or restrict automatic opening/network access.
Write a self-contained HTML file to the OS temp directory so nothing lands in the repo. Resolve the temp dir from `$TMPDIR`, falling back to `/tmp` (or `%TEMP%` on Windows), and write to `<tmpdir>/architecture-review-<timestamp>.html` so each run gets a fresh file. Open it for the user (`xdg-open <path>` on Linux, `open <path>` on macOS, `start <path>` on Windows) and tell them the absolute path.The report uses **Tailwind via CDN** for layout and styling, and **Mermaid via CDN** for diagrams where a graph/flow/sequence reliably communicates the structure. Mix Mermaid with hand-crafted CSS/SVG visuals: use Mermaid when relationships are graph-shaped (call graphs, dependencies, sequences), and hand-built divs/SVG when you want something more editorial (mass diagrams, cross-sections, collapse animations). Each candidate gets a **before/after visualisation**. Be visual.Show 3 other places
<meta charset="utf-8" /> <title>Architecture review for {{repo name}}</title> <script src="https://cdn.tailwindcss.com"></script> <script type="module"> import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs"; mermaid.initialize({ startOnLoad: true, theme: "neutral", securityLevel: "loose" }); </script> <style>- Lean editorial, not corporate-dashboard. Generous whitespace. Serif optional for headings (`font-serif` works well with stone/slate).- Colour sparingly: one accent (emerald or indigo) plus red for leakage and amber for warnings.- Keep diagrams ~320px tall so before/after sits comfortably side by side without scrolling.- Use `text-xs uppercase tracking-wider` for module labels inside diagrams, so they read as schematic, not as UI.- The only scripts are the Tailwind CDN and the Mermaid ESM import. The report is otherwise static: no app code, no interactivity beyond Mermaid's own rendering.- Use `text-xs uppercase tracking-wider` for module labels inside diagrams, so they read as schematic, not as UI.- The only scripts are the Tailwind CDN and the Mermaid ESM import. The report is otherwise static: no app code, no interactivity beyond Mermaid's own rendering.