It happens faster than you think. A Supabase service-role key gets assigned to a NEXT_PUBLIC_ variable. A Stripe secret key ends up in a client-side API call. A source map published by the build system exposes backend configuration. The key is now public — cached by search engines, archived by web scrapers, and indexed by automated key-scanning bots that exploit exposed credentials within minutes.
How keys end up in client bundles
The most common paths: environment variable prefixed with NEXT_PUBLIC_ or VITE_ when it should not be, direct import of a server-only module into a client component, source maps left enabled in production builds, and copy-paste from documentation examples that use the secret key for simplicity.
What to scan for
Scan the HTML source, all JavaScript chunks, inline scripts, source maps, and meta tags. Look for patterns matching known key formats: Supabase service-role (starts with eyJ), Stripe secret keys (sk_live_ or sk_test_), Firebase private keys, and any string matching common API key patterns. Automated scanning is essential because keys can appear in dynamically loaded chunks that are not visible in the initial page source.
Source maps: the hidden exposure
Even if your code does not directly expose a key, source maps can reveal the original source files including environment configuration, server-side modules, and inline secrets. If your production build publishes source maps, anyone can reconstruct your entire source tree. Either disable source maps in production or use Sentry-style private source map uploading.
Fix it: remove and rotate
Removing the key from code is not enough. If it was ever publicly accessible, it must be rotated. The old key should be considered compromised. Update your environment variables, deploy a clean build, and verify the new key works. Then scan again to confirm the exposure is resolved.
Scan continuously
PreFlight's Secret Drift Scanner runs against your production origin on every check. It scans pages, bundles, and source maps for exposed keys and flags them immediately. This catches re-introductions that happen when a developer adds a new environment variable with the wrong prefix or when a build configuration change re-enables source maps.
Expanded field note
Finding a key is only the first half: the practical answer
a client bundle is public by design, so a secret in it should be assumed compromised. This guide is for frontend teams and security reviewers. Start by naming the failure you want to prevent and the customer or operator who would notice it first.
The useful scope is whether a discovered string is a real credential and what systems it can access. That keeps the work concrete: you can choose a URL, provider, route, release, or data operation, observe it, and decide what to do when the observation does not match the expected contract.
What good looks like
asset URL, bundle or map context, key type, rotation owner, and post-rotation verification. A result is stronger when it preserves the input, environment, timestamp, expected behavior, observed behavior, and the next action. This lets a different person reproduce the finding without asking the original operator to reconstruct the entire context from memory.
public configuration and private credentials must have different names, scopes, and storage paths. Keep the scope visible when sharing the result. A passing outside-in check can prove a reachable behavior at a point in time; it cannot silently become a guarantee about private code, every authenticated role, or every provider failure mode.
Frame the decision before you change anything
frontend teams and security reviewers usually do not need another dashboard full of disconnected warnings. They need a defensible answer to a narrower question: is the behavior that matters to the customer working in the environment that is about to change? Start there. If the answer is unclear, make the ambiguity part of the work instead of translating it into a green score.
The first useful boundary is whether a discovered string is a real credential and what systems it can access. Write it down in the same language the team will use during the fix. Name the route, provider, release, role, data object, or browser action involved. Then write the expected behavior as a sentence that could be checked by another person. This turns a broad topic into a small contract and makes it easier to tell whether a failure is reproducible, transient, out of scope, or genuinely fixed.
A good scope also includes what the check does not attempt. Public observation is different from authenticated authorization testing. Provider reachability is different from a complete fulfillment path. A page that renders in a browser is not necessarily a page a crawler can index. Stating the limit early protects the reader from overconfidence and tells the operator when to add a deeper review.
Questions the result should answer
- What was tested? Identify the canonical URL, route, provider, account role, release, or customer action rather than describing the scope as “the site.”
- What should have happened? State the expected response, permission, side effect, delivery event, page directive, or recovery signal in plain language.
- What actually happened? Keep the observed status, safe error, response detail, timing context, or missing side effect without pasting credentials or customer data into the record.
- Why does it matter? Connect the observation to a customer, crawler, revenue, security, availability, or release decision so severity is not just a color.
- What happens next? Name the smallest reversible fix, the owner, the rerun, and the condition that will close the issue.
These questions are deliberately boring. Boring evidence is easier to compare, easier to hand off, and easier to defend later. It also gives an answer engine or a future teammate enough context to summarize the result without inventing a claim that the original check never made.
A sequence that holds up under pressure
- Download the same assets a browser receives.
- Search chunks and source maps, not only HTML.
- Classify public publishable identifiers separately from secrets.
- Revoke and rotate confirmed credentials before cleaning the bundle.
- Rerun the scan and inspect caches, history, and error logs.
The important nuance is this: public configuration and private credentials must have different names, scopes, and storage paths. That distinction matters because fast remediation can create a second problem: a broad header change can break a payment script, a credential rotation can break a cron worker, and a restrictive policy can make a valid customer path look like an outage.
Evidence to keep with the fix
| Record | Why it matters |
|---|---|
| Scope | The URL, role, provider, release, and limitation prevent a result from being reused outside the question it actually answered. |
| Before | The original failing observation, environment, and customer impact make the fix auditable. |
| Change | The code, configuration, provider setting, migration, or credential action that should alter the result. |
| After | A rerun against the same scope proves whether the intended behavior recovered. |
| Owner | A named person or team, an expected next action, and a review date keep the result from becoming an orphaned warning. |
| Follow-up | An owner, cadence, or release rule keeps the same class of failure from returning silently. |
Failure modes worth checking twice
- A team deletes the string but never rotates the credential.
- A false positive hides a real provider key.
- The source map is removed but an old chunk remains cached.
- The fix moves the key to another client-visible environment variable.
When one of these appears, avoid making several unrelated changes at once. Preserve the failing evidence, isolate the smallest boundary that can explain it, make one reversible correction, and rerun. That rhythm is slower than guessing for the first five minutes and faster than untangling a release that changed three providers at once.
Know when the first layer is not enough
Automation is valuable because it is repeatable, but repeatability is not the same as depth. If the question involves complex authorization, tenant isolation, injection, business logic, a high-value asset, or an adversarial threat model, use the automated result as a map for a deeper review. Give the reviewer the scope, failed observation, relevant release context, and the boundary you want tested. Do not present a public scan as a certification or a substitute for professional security work.
The same rule applies to operations. A successful provider probe may prove that a credential can reach an API, but it may not prove that a webhook creates the correct entitlement. A healthy uptime response may prove reachability, but it may not prove that a signed-in customer can complete the task. Add the assertion or browser journey that matches the real risk, and keep the cheap signal for early warning.
Questions people ask after reading this
What is the fastest useful first step?
Choose one representative scope and write the expected result before running the tool. For this topic, that means whether a discovered string is a real credential and what systems it can access. A small, explicit baseline is more useful than a large scan whose findings have no owner or decision attached.
What should I do when the result is green?
Keep the scope, timestamp, and limitation, then decide whether the result belongs in a release gate, monitor, report, or follow-up review. Green means the observed contract passed. It does not turn untested behavior into evidence.
What should I do when the result is red?
Read the evidence before changing configuration. Confirm the environment, reproduce the smallest failing behavior, assign the next action, and rerun after the fix. If the issue requires credentials, source access, or adversarial judgment, escalate it rather than hiding the gap behind a retry.
After the fix ships
Run the same check on the canonical production surface, not only on a local or preview environment. If the issue involved a provider, wait for the real callback or scheduled sample. If it involved search, confirm the HTML, canonical, robots, sitemap, and internal links agree. If it involved payments or access, verify the side effect a customer receives rather than stopping at a browser redirect.
PreFlight is designed for this last step: keep the original observation, connect the relevant provider or journey, attach the release context, and let the next run show whether the system stayed healthy. The goal is not a bigger report. It is a shorter path from signal to a verified decision.