PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Skill Details

Runtime
(claude-4-6-sonnet)
Example user message
[userMessage]: make security audit for: C:\Users\Nihil\Documents\GitHub\infinitdraw
Example agent response
I'll help you audit your frontend project for security issues. There's a skill designed exactly for this, so let me start by reading its instructions.Reading the frontend security audit skill instructionsReading the frontend security audit skill instructionsI have the audit process. One important thing first: the path you gave is C:\Users\Nihil\Documents\GitHub\infinitdraw, which is on your own computer. I work from a separate filesystem and can't reach that Windows path directly. Let me check whether I have access to your computer's filesystem through a connector.Searched available toolsSearched available toolsI do have filesystem access to your computer. Let me check which directories are allowed first.List Allowed DirectoriesList Allowed DirectoriesGood, your project is within an allowed directory. There's a separate Filesystem tools skill, but I'll proceed using the audit process from the security skill. Let me start by mapping the project. First, the stack and entry points. Since there's no directory-tree tool loaded, let me search for one, then read the key config files.Loaded tools, used Filesystem integrationLoaded tools, used Filesystem integrationA React + Redux + Firebase SPA with Webpack. Let me read the config files and the security-relevant source files. Starting with stack confirmation.Read Multiple FilesRead Multiple FilesNow let me read the security-sensitive files: Firebase config, Session/auth HOCs, and the forms.Read Multiple FilesRead Multiple FilesNow the forms, the bid panel, message box, and the HTML-rendering components. Let me read the rest of the attack surface.Read Multiple FilesRead Multiple FilesLet me read the remaining components that handle data rendering and the game logic, plus the service worker and the gitignore (to check for env exposure).Read Multiple FilesRead Multiple FilesI have the full attack surface. Let me check the service worker briefly to round out the picture, then deliver the audit.Read Text FileRead Text FileI have everything needed. The service worker is standard CRA boilerplate and unregistered at startup, so it's not a live concern. Now I'll present the audit plan and surface map. Per the audit process, I'm presenting this before any fixes and will not change a single file until you tell me what to remediate. Stack confirmed React 16 SPA + Redux + Redux-Thunk, routed with react-router-dom v5, bundled by Webpack 4 (not Create React App, despite the CRA-style service worker), styled with SASS modules. Backend is Firebase (Auth + Realtime Database) configured via dotenv-webpack env vars. No server-rendering, no custom HTML injection sinks. Attack surface map (modules) Build & config — webpack.config.js, index.html, dotenv-webpack Firebase/auth layer — Firebase/firebase.js, Session/* (auth HOCs, localStorage) Auth forms — SignInForm, SignUpForm, PasswordForget Authenticated app — HomePage (leaderboard, money), Game (draw/payout logic) UI primitives — Input, MessageBox, TextFrame, BidPanel Threat classes checked XSS / HTML-injection sinks · CSP & security headers · cookie/storage handling · URL & redirect sinks · postMessage · client-trust / authorization logic. Consolidated findings (ranked) The good news first: there are no dangerouslySetInnerHTML, innerHTML, eval, javascript: URLs, or postMessage sinks anywhere. All user/DB values reach the DOM through React's auto-escaping JSX ({userData.nick}, {userEmail}, {error.message}, etc.), so classic DOM-XSS is not present. The real risks here are client-side trust, missing headers, and token storage. CRITICAL C1 — Game economy is fully client-authoritative (containers/Game/Game.js, store/actions/draw.js). The draw outcome, multiplier, and payout are computed in the browser, then written directly to the DB with firebase.user(uid).update({ money }). Anyone can open devtools and call the same update to set arbitrary money, or just edit setMoneyInAppAndDB. This is a stored-integrity issue, not cosmetic — the DB trusts whatever the client sends. C2 — Authorization depends entirely on Firebase Realtime Database security rules, which aren't in this repo. withAuthorization only hides UI; firebase.users() reads the entire users collection for the leaderboard. If your DB rules aren't locked down, any authenticated user can read/write every user's record. I can't see the rules from here — you must verify them in the Firebase console. This is the single most important thing to check. HIGH H1 — No Content-Security-Policy at all. index.html has no CSP <meta> and Webpack injects none. Combined with style-loader (which injects inline <style>) and Firebase, you'd need a real policy. Recommend a build-injected or server header CSP; at minimum a meta tag. H2 — Auth state persisted in localStorage (Session/withAuthentication.js: localStorage.setItem('authUser', …)). The full user object (uid, email, money, providerData) sits in JS-readable storage. Any script that does run (e.g. via a future dependency compromise) can read it. Firebase's own SDK persistence is the safer store; this hand-rolled mirror widens exposure. H3 — Missing security response headers. No X-Frame-Options/frame-ancestors (clickjacking), X-Content-Type-Options: nosniff, or Referrer-Policy. These are deploy-time headers (out of pure-frontend scope but worth flagging). MEDIUM M1 — Firebase API key shipped in the bundle via env vars (firebase.js). This is normal for Firebase and not itself a secret, but it only stays safe if DB rules and Auth domain restrictions are configured. Ties directly to C2. M2 — Broken validation logic (shared/validation.js). if(rules.notEpmty) then validity = validity.trim() calls .trim() on a boolean — would throw — and the key is misspelled vs. NotEmpty/notEpmty used elsewhere, so it never fires. minLength/maxLength overwrite validity instead of &&-ing it. Weak client validation isn't a vuln by itself (server/DB rules must validate anyway), but it's a security-relevant correctness bug. M3 — window.location.reload / no open-redirect: routing uses static ROUTES constants only — no user-controlled redirects. Clean; noted for completeness. LOW L1 — Source maps (devtool: 'cheap-module-eval-source-map') and mode declared twice in webpack config (the second mode: 'production' wins, but devServer/devtool config is contradictory). Ship without source maps in prod. L2 — SendResetPasswordButton (PasswordForget/index.js) has a buggy onClick using the comma operator — only the second fn runs. Functional bug, low security relevance. L3 — Outdated dependencies (Firebase 7, React 16, Webpack 4). Dependency CVE remediation is explicitly out of this skill's scope, but flagged as residual risk for a separate npm audit pass. The biggest issues (C1, C2) can't be fully fixed in frontend code — they need Firebase Realtime Database security rules and ideally moving payout logic server-side (Cloud Functions). I can't reach your Firebase console, and changing access rules is something you'll need to do yourself. Which findings would you like me to remediate? I'd suggest the frontend-fixable ones: H1 (add a CSP), H2 (stop mirroring auth into localStorage), M2 (fix the validation logic), L1/L2 (config + reset-button bug). For C1/C2/M1 I can write hardened example DB rules and outline the server-side payout change, but you'd apply those in Firebase yourself. Let me know which to do and I'll make only those edits.You said: yes do ityes do it10:19Claude responded: I'll fix the frontend-remediable findings: H1 (CSP), H2 (localStorage auth mirror), M2 (validation logic), and L1/L2 (config + reset-button bug).I'll fix the frontend-remediable findings: H1 (CSP), H2 (localStorage auth mirror), M2 (validation logic), and L1/L2 (config + reset-button bug). For C1/C2/M1 I'll provide hardened example Firebase DB rules and the server-side outline as separate files you apply yourself, since I can't touch your Firebase console. Let me re-read the exact current content of each file right before editing to make sure my edits land cleanly.Read Text FileRead Text FileNow H1 — add a CSP meta tag. Firebase needs to connect to its own domains; style-loader injects inline styles so style-src needs 'unsafe-inline' (that's a known limitation of the dev/style-loader setup, not something I can avoid without reworking the CSS pipeline). I'll scope script-src tightly and note the residual unsafe-inline on styles.H1: Add a Content-Security-Policy meta tag scoped for FirebaseH1: Add a Content-Security-Policy meta tag scoped for FirebaseThe str_replace tool operates on my own environment, not your computer. For your filesystem I need the Filesystem:edit_file tool. Let me load it.Searched available toolsSearched available toolsNow I have the right tool. H1 — CSP meta tag:Edit FileEdit FileH1 done. Now H2 — stop mirroring the full auth object into localStorage. Firebase's SDK already persists the session securely; the hand-rolled mirror is what widens exposure. I'll keep the listener but stop writing the user object to localStorage, and initialize state to null so it rehydrates from Firebase's own listener.Edit FileEdit FileH2 done. There's a small UX tradeoff worth noting: with the localStorage mirror gone, there may be a brief flash where authUser is null on reload until Firebase's listener fires. That's the correct behavior — the previous "instant" auth was based on untrusted client data anyway. Now M2 — fix the broken validation logic in validation.js. The bugs: notEpmty calls .trim() on a boolean and is misspelled; minLength/maxLength overwrite validity instead of combining with &&.Edit FileEdit FileM2 done. Note I normalized the rule key to notEmpty. Your code elsewhere uses NotEmpty (capital N) in the SignIn form's validation config, which never matched the old notEpmty either — so that rule has never actually run. The required rule already covers the same check, so behavior for existing forms is unchanged; if you want NotEmpty specifically honored, rename those config keys to notE
🟧 Claude Skill

Frontend Security Audit Fix Pass

Add to Cart
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this skill, you agree to our terms of service
CLAUDE-4-6-SONNET
Tested icon
Guide icon
Free credits icon
A structured skill that audits your frontend app module by module for XSS, content security policy gaps, insecure cookies, and dangerous HTML injection. It maps your attack surface, plans before touching code, ranks every finding by severity, then fixes only what you approve and re-audits to confirm the patches held. Built for frontend developers who want a repeatable security pass instead of a one-off grep.
...more
Added 1 week ago
Report
  • Reviews for this skill (1)
Browse Marketplace