Review 2FA QR generation.

Author: lewisgoddard

TODO.md

@@ -88,7 +88,7 @@ Defence-in-depth work to land shortly after launch.
 - [x] **CSP violation reporting.** PHP exposed `api/csp_report.php` and logged breaches.
   - [x] Added `report-uri /api/csp-report` and `report-to csp-endpoint` to both CSP lines in `public/_headers`, plus a `Reporting-Endpoints` header naming `csp-endpoint` for the modern Reporting API.
   - [x] Added `functions/api/csp-report.ts` — a DB-free, unauthenticated collector that parses both the legacy `{ "csp-report": … }` body and the modern `application/reports+json` array, logs each violation (`console.warn`, capped per request), and returns `204`.
-- [ ] **Review 2FA QR generation.** Consider a more secure method for generating QR codes — `functions/api/db/auth/2fa/setup/start.ts:132`.
+- [x] **Review 2FA QR generation.** The QR code was generated by sending the `otpauth://` URI — which embeds the TOTP secret — to the third-party `api.qrserver.com`, leaking every user's 2FA seed. Now rendered in the Worker as an inline `<svg>` via `uqr` (zero-dependency, Workers-native); the secret never leaves the origin. Inline SVG is page markup, so it is also unaffected by the page's `default-src https:` CSP (a `data:` URI would not be).
 - [ ] **2FA bypass flow.** Replace the password-reset fallback with a dedicated email-based flow to bypass 2FA — `public/2fa.html:56`.
 
 ## Phase 3 — Account & password parity

functions/api/db/auth/2fa/setup/start.ts

@@ -1,4 +1,5 @@
 import { generateSecret, generateURI } from "otplib"
+import { renderSVG } from "uqr"
 import { read2fa, create2fa } from "../../../../../../src/2fa.js"
 import { readUser } from "../../../../../../src/users.js"
 
@@ -121,21 +122,28 @@ export const onRequestPost: Handler = async (context) => {
       )
     }
 
-    // Step 6: Generate QR Code Data (TOTP Auth URI)
+    // Step 6: Generate the TOTP auth URI and render it to a QR code.
+    // The URI embeds the TOTP secret, so the QR code is rendered here, in the
+    // Worker, as an inline SVG — the secret is never sent to a third-party
+    // image service. Inline SVG is page markup, not a fetched resource, so it
+    // is also unaffected by the page's `default-src https:` CSP.
     const otpauthUri = generateURI({
       issuer: APP_NAME,
       label: userName,
       secret: display_secret,
     })
+    const qrCodeSvg = renderSVG(otpauthUri, { border: 2 }).replace(
+      "<svg",
+      '<svg class="tfa-qr-code" width="200" height="200" role="img" aria-label="Two-factor authentication QR code"'
+    )
 
     // Step 7: Response - HTML for HTMX
-    // TODO: [Security] Consider using a more secure method for generating QR codes
     const htmlResponse = `
       <div>
         <h3>Setup Two-Factor Authentication</h3>
         <p>Scan the QR code with your authenticator app or enter the setup code manually.</p>
         <div class="tfa-qr-layout">
-          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(otpauthUri)}" alt="QR Code" class="tfa-qr-code"/>
+          ${qrCodeSvg}
           <div>
             <p><strong>Manual Setup Code:</strong></p>
             <p class="tfa-secret-display">${display_secret}</p>

package-lock.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "otplib": "^13.4.0",
-    "pg": "^8.20.0"
+    "pg": "^8.20.0",
+    "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@types/node": "^25.8.0",