Article

Credential Leakage Risks Hiding in Frontend Code

Learn why credentials like API keys and tokens are critical for access control and the risks of exposure to secure your applications and systems effectively.

The Big Threat to Credentials in Cyber Security

How much do you know about the importance of credentials? Credentials are the privileges that give you access to an application or system, such as API keys, database access information, session tokens, and more. What happens if these credentials are exposed to the outside world?

It's a scary thing to think about. For starters, if an attacker gets hold of your credentials, they'll be able to take control of some of your services. It's not uncommon for them to crash your site, trick users into taking over their accounts, or even worse, compromise your customers' information. Services today store a lot of valuable data, including personal information. What happens when an attacker steals this data? Individuals could suffer identity theft or financial harm, and organizations could face legal sanctions and huge losses in trust. It's a devastating blow that can threaten a company's very existence.

In other words, credentials are like the keys to a safe. You don't want to hand over the keys to your organization's most valuable assets - your data - to the wrong hands. So, just like keys, credentials need to be locked away and access to them tightly controlled, especially when they're embedded in front-end code. Front-end code that runs in the open space of the browser can be easily snooped on by anyone, so sensitive credentials should never be left on the front-end for any reason.

Credential Breaches Are Becoming More Common

That's exactly what happened to Resend. Their front-end code left hard-coded database access information exposed. Hackers were able to learn environment variables from client source code and access customer databases at will. As a result, the company suffered a serious security breach.

Unfortunately, this story is not unique. We used Probe to validate the front-end code of some of South Korea's most popular websites and found that 14 out of 70 sites had exposed credentials. In short, they're making similar mistakes to Resend.

Code snippet showing configuration file structure with redacted API keys/secrets for various services.

The most common issue was the exposure of OAuth's Client Secret, which is a sensitive value used for OAuth authentication that, if compromised, can put the entire service at risk. The next most common issue was third-party access tokens with all permissions open. These tokens are used as authentication when calling external APIs, and if the permissions are not set correctly, an attacker can exploit the token to manipulate the core functionality of the service.

Code snippet showing configuration keys (OpenAI, MS Speech, AWS) with their values redacted.

We've also seen critical credentials, such as AWS IAM secret keys, embedded directly into the code - hard-coded. This may seem like a small mistake at first glance, but it poses a huge security risk.

Code snippet: Configuration settings for Github Actions, S3, npm, paths, with some values redacted.

On some sites, the OIDC access token used by the build server was left as an environment variable, which was left in the front-end build files, or the credentials were left in a configuration file that was accidentally committed to the repository.

These examples suggest that many organizations overlook the importance of front-end security, perhaps out of a vague sense of complacency that the front-end is less risky than the back-end, but it's important to recognize that the security risks inherent in the front-end are not to be taken lightly.

So why do so many developers neglect front-end security? The truth is, in haste, they often hardcode credentials instead of setting cumbersome environment variables. But more importantly, this has become increasingly common in recent years because today's front-end code doesn't just draw on the screen, it often deals directly with sensitive data.

Let's take a look at an example of how this mistake can be made during development. First, let's take a look at the next.config.js file, which is responsible for configuring the Next.js application.

Javascript code: Next.js config spreading all environment variables (process.env) into public config.

The above code is a good example of a common security issue that can arise in the pursuit of ease of development. The publicRuntimeConfig option is a feature provided by Next.js that allows you to set client-side accessible environment variables. This is useful for things like public API keys or settings needed for business logic. However, in the codeabove, we're assigningprocess.env in its entirety using the spread syntax. This means that we're exposing all of the server's environment variables to the client without exception.

What if process.envcontains sensitive credentials, such as database access information, secret keys for third-party services, and so on? It's just bundled into the client-side bundle, making it accessible to everyone. If you open your browser's developer tools, you'll see code like process.env.DB_PASSWORD in plain text, which is obviously a development convenience, but it's a pretty risky code from a security perspective.

Code snippet: Next.js _app file defining getServerSideProps with a hardcoded SECRET value.

The code above shows a case where Next.js's page router includes a hardcoded credential key during server-side rendering (SSR). Typically, Next.js doesn't bundle server-side code with the client, so many developers hardcode the secret key as a convenience, thinking it's relatively safe compared to the API route. But there's a pitfall. It's the source map.

For example, you might upload a source map to introduce an error monitoring solution like Sentry. This is because they need the source map to map the obfuscated stack traces to the original code.

The problem is that these source maps can also contain server-side code. This means that not only the API routes are exposed, but also any code written to get Server Side Props (SSP). This is a very dangerous situation, as it shows that Sentry is a very useful tool, but it can also be an attack vector.

Code editor view: Next.js project tree and _app.tsx code with hardcoded SECRET variable.

Recently, the Next.js and React ecosystems have been undergoing a revolutionary transformation. The introduction of the React Server Component (RSC) in Next.js 13 revolutionized the development paradigm by blurring the lines between server-side and client-side rendering, and Next.js 14 added a new feature called Server Actions.

These technologies have greatly improved development productivity and user experience. But they also introduce new security risks. The blurring of the lines between server and client code has increased the potential for credential exposure. Let's take a look at this risk in the code below.

React code: Server-side getEnv fetches SECRET_TOKEN, bound securely to a Server Action form.

The above code is a simple form component using RSC. The logic is to get an environment variable called SECRET_TOKENvia the getEnv function, pass it to the run function, and run it on the server.

Here, the run function has the "use server " directive added to it. This indicates that the function will only be executed on the server and will not be sent to the client. So at first glance, it looks like the SECRET_TOKENwill never be exposed to the client, and it’s being used securely on the server only.

However, there’s a significant pitfall to watch out for. By default, Next.js encrypts Server Components before sending them to the client. But if you bind a value, as shown in the code above, the encryption is automatically bypassed when using a Server Action. This means the value of SECRET_TOKEN is exposed and embedded in the client-side code. You can confirm this by inspecting your browser’s developer tools.

Generated HTML form showing SUPER_SECRET_TOKEN embedded as a value in a hidden input field.


What Should We Do Next?

As such, securing front-end applications requires a systematic approach throughout the development process. The simplest and most important one is to never include sensitive information in front-end code. Credentials like API keys or secret tokens should never be included in JS bundles, no matter how convenient.

To achieve this, it's important that your entire development team understands and practices secure coding principles. Regular training and workshops will help build secure coding habits, and a culture of code review within the team will help proactively identify vulnerabilities. Creating checklists to review all code changes from a security perspective is also effective.

However, even the best processes and design can't completely eliminate human error, especially with newer technologies like Next.js' Server Action and React Server Component blurring the lines between server and client, making it easier for developers to accidentally expose credentials. It's wise to enlist the help of an automated scanning tool. Probe by Cremit not only detects hard-coded credentials in source code, but also finds and alerts you to wrongfully shared API keys, passwords, and more scattered across collaboration tools like Notion, Slack, and Jira.

When it comes to front-end development, security is no longer an option, it's a necessity. And not just from a technical standpoint, but also from a business sustainability standpoint. You must prioritize protecting your customers’ trust while enhancing brand value.

What happened to Resend should be a wake-up call, it's time to realize the importance of front-end security and get proactive. Let Probe be your vigilant guardian - the more secure your code is, the better the internet will be for everyone. Contact us today to get started.

Cremit Makes The Cyber World Safer

In addition to the numbers in this post, we also found other highly sensitive leaks (plain text exposure of credentials in Alibaba Cloud, administrator credentials in AWS Cloud, among other authentication tokens).

Most of the vulnerable sites still did not read the notifications we sent (about 20%) or did not respond (about 35%), but Cremit's continuous contact with the AWS Account Management team helped us remediate most of the threats.

Want to have a technical discussion with Cremit? Sign up for a meeting and demo.

Unlock AI-Driven Insights to Master Non-Human Identity Risk.

Go beyond basic data; unlock the actionable AI-driven insights needed to proactively master and mitigate non-human identity risk

A dark-themed cybersecurity dashboard from Cremit showing non-human identity (NHI) data analysis. Key metrics include “Detected Secrets” (27 new) and “Found Sensitive Data” (58 new) from Jan 16–24, 2024. Two donut charts break down source types of detected secrets and sensitive data by platform: GitHub (15k), GetResponse (1,352), and Atera (352), totaling 16.9k. The dashboard includes a line graph showing trends in sensitive data over time, and bar charts showing the top 10 reasons for sensitive data detection—most prominently email addresses and various key types (API, RSA, PGP, SSH).

Blog

Explore more news & updates

Stay informed on the latest cyber threats and security trends shaping our industry.

OWASP NHI5:2025 Insecure Authorization Deep Dive
Explore OWASP NHI5: Insecure Authorization. See how Non-Human Identities gain excess privileges, causing breaches. Learn countermeasures like Zero Trust & least privilege.
OWASP NHI4:2025 Insecure Authentication Deep Dive Introduction: The Era of Non-Human Identities Beyond Humans
Deep dive into OWASP NHI4: Insecure Authentication. Understand the risks of NHIs, key vulnerabilities, and how Zero Trust helps protect your systems.
Secret Sprawl and Non-Human Identities: The Growing Security Challenge
Discover NHI sprawl vulnerabilities and how Cremit's detection tools safeguard your organization from credential exposure. Learn to manage NHI risks.
Navigating the Expanding AI Universe: Deepening Our Understanding of MCP, A2A, and the Imperative of Non-Human Identity Security
Delve into AI protocols MCP & A2A, their potential security risks for AI agents, and the increasing importance of securing Non-Human Identities (NHIs).
Stop Secrets Sprawl: Shifting Left for Effective Secret Detection
Leaked secrets threaten fast-paced development. Learn how Shift Left security integrates early secret detection in DevOps to prevent breaches & cut costs.
Hidden Dangers: Why Detecting Secrets in S3 Buckets is Critical
Learn critical strategies for detecting secrets in S3 buckets. Understand the risks of exposed NHI credentials & why proactive scanning is essential.
NHI2 2025: Secret Leakage – Understanding and Mitigating the Risks
NHI2 Secret Leakage: Exposed API keys and credentials threaten your business. Learn how to prevent unauthorized access, data breaches, and system disruption.
Stop the Sprawl: Introducing Cremit’s AWS S3 Non-Human Identity Detection
Cremit Launches AWS S3 Non-Human Identity (NHI) Detection to Boost Cloud Security
Human vs. Non-Human Identity: The Key Differentiators
Explore the critical differences between human and non-human digital identities, revealing hidden security risks and the importance of secret detection.
Wake-Up Call: tj-actions/changed-files Compromised NHIs
Learn from the tj-actions/changed-files compromise: CI/CD non-human identity (NHI) security risks, secret theft, and proactive hardening.
NHI 3 2025: 3rd Party Supply Chain Dangers
Discover the security risks of vulnerable third-party non-human identities (NHI3:2025) and learn effective strategies to protect your organization from this OWASP Top 10 threat.
Build vs. Buy: Making the Right Choice for Secrets Detection
Build vs. buy secrets detection: our expert guide compares costs, features, and ROI for in-house and commercial security platforms.
Bybit Hack Analysis: Strengthening Crypto Exchange Security
Bybit hacked! $1.4B crypto currency stolen! Exploited Safe{Wallet}, API key leak, AWS S3 breach? Exchange security is at stake! Check your security now!
Rising Data Breach Costs: Secret Detection's Role
Learn about the growing financial impact of data breaches and how secret detection and cybersecurity strategies can safeguard your data and business.
NHI1 2025: Improper Offboarding- A Comprehensive Overview
Discover how improper offboarding exposes credentials, leading to vulnerabilities like NHI sprawl, attack surface expansion, and compliance risks.
Behind the Code: Best Practices for Identifying Hidden Secrets
Improve code security with expert secret detection methods. Learn strategies to safeguard API keys, tokens, and certificates within your expanding cloud infrastructure.
Understanding the OWASP Non-Human Identities (NHI) Top 10 Threats
Understanding NHI OWASP Top 10: risks to non-human identities like APIs and keys. Covers weak authentication, insecure storage, and more.
Securing Your Software Pipeline: The Role of Secret Detection
Prevent secret leaks in your software pipeline. Discover how secret detection improves security, safeguards CI/CD, and prevents credential exposure.
What Is Secret Detection? A Beginner’s Guide
Cloud security demands secret detection. Learn its meaning and why it's essential for protecting sensitive data in today's cloud-driven organizations.
Full Version of Nebula – UI, New Features, and More!
Explore the features in Nebula’s full version, including a refined UI/UX, fine-grained access control, audit logs, and scalable plans for teams of all sizes.
Unveiling Nebula: An Open-Source MA-ABE Secrets Vault
Nebula is an open-source MA-ABE secrets vault offering granular access control, enhanced security, and secret management for developers and teams.
Vigilant Ally: Helping Developers Secure GitHub Secrets
The Vigilant Ally Initiative supports developers secure API keys, tokens, and credentials on GitHub, promoting secure coding and secrets management.
Cremit Joins AWS SaaS Spotlight Program
Cremit joins the AWS SaaS Spotlight Program to gain insights through mentorship and collaboration, driving innovation in AI-powered security solutions.
DevSecOps: Why start with Cremit
DevSecOps is security into development, improving safety with early vulnerability detection, remediation, and compliance, starting with credential checks.
Credential Leakage Risks Hiding in Frontend Code
Learn why credentials like API keys and tokens are critical for access control and the risks of exposure to secure your applications and systems effectively.
Introducing Probe! Cremit's New Detection Engine
Probe detects exposed credentials and sensitive data across cloud tools, automating validation and alerts, with AI-powered scanning for enhanced security.
Customer Interview: Insights from ENlighten
We interviewed Jinseok Yeo from ENlighten, Korea’s top energy IT platform, on how they secure credentials and secrets. Here’s their approach to security.
6 Essential Practices for Protecting Non-Human Identities
Safeguard your infrastructure: Learn 6 best practices to protect API keys, passwords & encryption keys with secure storage, access controls & rotation.
Microsoft Secrets Leak: A Cybersecurity Wake-Up Call
See how an employee error at Microsoft led to the exposure of sensitive secrets and 38 terabytes of data.