Security Risks with Client Components 🔑
One common security risk in SaaS applications (Software as a Service), especially those interacting with APIs, is the exposure of private API keys.
Most APIs require an API key for access, and a significant security flaw in Next.js applications can occur when these keys are inadvertently exposed to clients. This exposure presents a substantial security risk.
In this section, we'll
- Demonstrate an example of this security vulnerability.
- Explain how to identify such security flaws in your Next.js applications.
- Provide guidance on how to avoid this security issue.
Let's dive into a common security pitfall and fix it!
We're going to convert the page.tsx in our "Security: Exposing API Keys" app to a Server Component. Why? Because we don't want our API keys hanging out in the browser for anyone to see!
What is NEXT_PUBLIC_*?
In order for client components to access environment variables, we need to prefix them with NEXT_PUBLIC*. But if you expose them to the browser as NEXT_PUBLIC_*, they can be accessed by anyone including the client browser!
First, let's watch a quick video to understand here.
Let's get to the exercise!