NextJS security is vital for safeguarding your Vercel Logging applications and protecting sensitive data from cyber threats. Implementing the right security measures can be challenging, but this blog will delve into the best practices for ensuring your NextJS application's security. Alerty's NextJS logging solution provides a valuable tool to monitor and enhance the security of your applications.
Alerty's NextJS logging solution equips you with the tools to monitor and enhance application security. Stay ahead with actionable insights and proactive measures to fortify your NextJS applications against potential vulnerabilities.
The main selling point of NextJS is the ability to choose a different page rendering method for each page—server-side, static, client-side, incremental static regeneration, or on-demand revalidation. This flexibility makes NextJS suitable for most kinds of websites.
NextJS provides a fantastic developer experience with features like TypeScript and ESLint integrations and fast refreshing when developing your website. When deployed, Next.js does the following:
Compared to React, you don’t have to worry about using bundlers like Webpack and Babel or production optimizations like code splitting. NextJS does all of this boring stuff automatically so you can focus on building your actual application business logic.
NextJS is widely used by the biggest and most popular companies worldwide, such as:
It’s also considered one of the fastest-growing React frameworks.
The growing concern over security measures in web applications is a hot topic, and for good reason. With cyberattacks becoming more sophisticated and frequent, ensuring the security of web applications has never been more critical. Businesses of all sizes recognize that a breach can lead to financial losses, significant damage to their reputation, and loss of customer trust.
One of the key concerns is the increasing number of vulnerabilities within web applications.
According to Sitelock, 18% of websites have critical security risks, such as backdoors and malicious file modifications. Approximately 4.1 million websites have malware at any given time. Attackers are constantly finding new ways to exploit these vulnerabilities, making it essential for developers to stay ahead with up-to-date security practices and regular code audits.
The complexity of modern web applications adds another layer of challenge. Many applications are built using a mix of third-party libraries and frameworks, which, while speeding up development, can introduce additional risks if not properly managed. Keeping all components updated and patched is daunting but necessary to prevent attackers from exploiting known vulnerabilities in outdated software.
There’s also a growing need for better logging and monitoring. Without adequate logging, it’s challenging to detect and respond to security incidents on time. Effective monitoring can help identify suspicious activities early on and mitigate potential damage. This means having logs and ensuring they are comprehensive and stored securely.
In response to these challenges, there’s a push towards adopting more robust security frameworks and tools.
There’s an emphasis on fostering a culture of security awareness among developers, as human error often plays a significant role in security breaches.
While the landscape of web application security is continuously evolving, it's crucial to stay informed and proactive about potential threats and mitigation strategies. It’s about creating a multi-layered defense system that can adapt and respond to new challenges as they arise.
Alerty is a cloud monitoring service tailored for developers and early-stage startups, offering:
Alerty monitors key metrics in databases like Supabase, PostgreSQL, and RDS, tracking CPU usage and memory consumption to optimize performance.
With incident management and Real-User Monitoring (RUM), Alerty helps developers address issues before they affect users. Universal Service Monitoring covers dependencies like Stripe API, OpenAI, and Vercel.
AI-driven setup makes Alerty quick and easy to deploy. It's cost-effective pricing and seamless integration with tools like Sentry make it ideal for small teams.
Catch issues before they affect your users with Alerty's NextJS logging tool today!
Web applications can be vulnerable to various security threats that can compromise user data and the integrity of the application. The Open Web Application Security Project (OWASP) has identified the top ten most common security risks in web applications:
Injection flaws such as SQL injection and cross-site scripting (XSS) allow attackers to inject malicious code into web applications, compromising data and potentially taking control of the application.
Broken access control occurs when attackers gain unauthorized access to resources that should be restricted.
Sensitive data like passwords and credit card numbers can be exposed if improperly encrypted or stored securely.
XSS flaws allow attackers to inject malicious code into applications in the victim's browser.
Attackers can trick users into visiting malicious sites using unvalidated redirects and forwards, leading to data theft or malware installation.
6. Insufficient Logging and Monitoring
Inadequate logging and monitoring make detecting and responding to security incidents challenging, enabling attackers to go undetected.
Misconfigurations arising from default settings or incomplete setups can lead to unauthorized access by attackers.
Poor software design can introduce vulnerabilities that attackers exploit. Secure design patterns and architectures can help mitigate these risks.
Outdated and vulnerable components make applications easy targets for attackers, highlighting the importance of regular updates and patching.
SSRF occurs when attackers trick web applications into sending data to unintended locations, potentially exposing sensitive internal systems.
Implementing HTTP security headers in Next.js is crucial to enhance the security of your application. These security headers help protect your app against common web threats like cross-site scripting and clickjacking.
Here are some key headers you should consider incorporating:
Prevents the browser from MIME-sniffing the content type, avoiding scenarios where scripts get executed due to MIME-type manipulation.
Ensures the browser only connects to your application using a secure HTTPS connection, bypassing insecure HTTP connections.
This policy limits the sources of executable scripts or stylesheets, preventing attacks like cross-site scripting. You can customize the policy only to allow scripts to be loaded from specific domains.
To add these security headers to your Next.js application, include them in your `next.config.js` file. Remember to configure them to fit the needs of your app to avoid breaking your application. Always test comprehensively when setting up new security measures.
Outdated dependencies are a security risk, as they may contain known vulnerabilities that attackers can exploit. When you update your dependencies, you get the latest versions, which often include crucial security fixes for vulnerabilities discovered in previous versions.
Here are a few tools that you can use to keep your dependencies up-to-date:
Node package manager (npm) comes with audit, a built-in command-line tool for identifying security vulnerabilities within your project’s dependencies.
It does this by scanning your project’s package-lock.json or yarn.lock to gather information about the installed packages and their dependencies. It then compares the package information against the Node Security Platform (NSP) database, which contains a comprehensive list of known security vulnerabilities in various packages and versions.
To use npm audit in Next.js, navigate to your project’s root directory in your terminal and run the code below:
Once the scan is complete, it will generate a report detailing the vulnerabilities found in your project. The report categorizes vulnerabilities by severity levels (low, moderate, high, critical) and suggests remediating them.
This GitHub service automatically creates pull requests to update your dependencies when new versions are released. It is available for all repositories on GitHub, regardless of their size or popularity. It is also available for all programming languages that use package managers, such as Node.js, Python, and Ruby.
To use Dependabot, you need to enable it in your repository settings. Once enabled, it will start scanning your dependencies for new versions and create a pull request to update them when a new version is released. You can then review and merge the pull request if you are happy with the changes or reject it.
While Next.js inherits React's built-in security mechanisms, you cannot rely on them alone. Never trust data blindly – always validate input from users and external APIs. React's escaping and sanitization help prevent XSS attacks but don't cover all validation needs. You must still ensure that the data conforms to your application's expectations.
TypeScript's type checking is a valuable first step but doesn't guarantee data validity. A string might be correct, but it could still contain malicious content or be out of range for your application. Use a package like Zod or Valibot (or others) to validate data from users and APIs.
These libraries offer schema-based validation, ensuring incoming data matches your defined structure, types, and constraints. Don't be afraid to be strict and reject invalid input if you also provide user-friendly error messages that clearly explain what's wrong and how to fix it.
Integrate validation directly into your ORM (e.g., drizzle-zod) or API framework (e.g., tRPC) for a smooth developer experience and consistent data integrity throughout your stack.
// Drizzle schema for the teams table
const teamIdPrefix = "team";
export const teams = pgTable("teams", {
id: text("id")
.notNull()
.primaryKey()
.$defaultFn(() => typeid(teamIdPrefix).toString()),
name: text("name").notNull(),
isDefault: boolean("is_default").default(false),
createdAt: timestamp("created_at", { mode: "date" }).notNull().defaultNow(),
updatedAt: timestamp("updated_at", { mode: "date" }).notNull().defaultNow(),
deletedAt: timestamp("deleted_at", { mode: "date" }),
});
export type Team = typeof teams.$inferSelect; // return type when queried
export type NewTeam = typeof teams.$inferInsert; // insert type
// Zod schema lives alongside the database schema
export const insertTeamSchema = createInsertSchema(teams, {
name: (schema) =>
schema.name
.min(2, { message: "Must be 2 or more characters." })
.max(100, { message: "Must be 100 or fewer characters." })
.trim(),
});
export const selectTeamSchemaId = createSelectSchema(teams, {
id: (schema) =>
schema.id.trim().startsWith(teamIdPrefix).min(typeIdMin).max(typeIdMax),
name: (schema) => schema.name.optional(),
isDefault: (schema) => schema.isDefault.optional(),
createdAt: (schema) => schema.createdAt.optional(),
updatedAt: (schema) => schema.updatedAt.optional(),
deletedAt: (schema) => schema.deletedAt.optional(),
});
These features have their uses but should warrant extra caution and review:
Any use of dangerouslySetInnerHTML in your application is a risk. This feature is explicitly named "dangerous" for a reason. It allows you to inject raw HTML directly into the DOM, bypassing React's security mechanisms. This opens the door to Cross-Site Scripting (XSS) attacks, where malicious scripts can be executed in the user's browser. Instead, construct your HTML dynamically within your components using props, state, or other safe mechanisms. This allows React to sanitize the output and protect against XSS vulnerabilities.
Using innerHTML to set content can expose your application to XSS attacks if not handled carefully. Prefer innerText when setting plain text content. Unlike innerHTML, innerText does not parse HTML tags, preventing the execution of injected scripts.
While it's generally best to avoid these features, there may be rare cases where they are necessary, such as when integrating with third-party libraries.
Input validation is the process of checking user input to make sure that it is valid and does not contain any malicious code. It protects your app from cross-site scripting (XSS), SQL injection, and file upload attacks. It is essential to help you get clean, usable data that is secure and accurate while improving user experience.
HTML offers various ways to check if forms are filled out correctly, with the most popular one being the required attribute. It guarantees that a field must have some content. You can apply this to your Next.js application by adding the attribute to your input tags.
HTML includes a pattern attribute, allowing you to perform more advanced validation using regular expressions when necessary.
Here’s an example:
Import React, { useState } from 'react';
function MyForm() {
const [formData, setFormData] = useState({ firstName: '', email: '' });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
// Perform form submission or validation logic here
console.log(`Form submitted with data:`, formData);
};
return (
<form onSubmit={handleSubmit}>
<label>
First Name:
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
required // Indicates that this field must have content
/>
</label>
<br />
<label>
Email:
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required // Indicates that this field must have content
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
// Uses a regular expression to validate email format
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
Export default MyForm in the code above.
You created a form component that takes in a first name and email input and displays it in your browser’s console when the submit button clicks. Each input has a required attribute, ensuring a user fills it in before submitting.
The email input also has a pattern attribute containing a regex pattern that checks that the user inputs a valid email address.
In addition to the built-in methods, there are also many libraries that you can use to write efficient, simple, and complex forms with validation. Some popular libraries include:
It helps enforce proper input validation by providing several features, such as:
It provides a register method for your HTML <input> element with built-in validation parameters such as required, pattern, minLength, and maxLength. You can even create custom validation functions using its validation rule. React Hook Form’s Controller component also provides more granular control over the input state, allowing easier integration with external libraries and more complex validation logic.
Its useForm() hook provides a formState: { errors } property, allowing you to create custom error messages and UI for each input.
React Hook Form supports async validation, which allows you to validate user input against a remote API. This can be useful for validating sensitive data, such as credit card numbers.
It leverages React Hooks for better form state management such as:
Next.js automatically loads environment variables and wisely defaults to restricting them to server-side code. This means they are not directly exposed to the client side, helping to prevent accidental data leaks.
If you must make a variable accessible on the client side, prefix it with NEXT_PUBLIC_. Exercise with caution – any value you expose this way becomes visible to anyone who inspects your website's code.
Avoid directly storing API keys, database credentials, or other sensitive secrets in environment variables. This is a security risk as environment variables can be easily exposed in various ways (e.g., through logs, crashes, or misconfigurations). Use a dedicated secrets manager like:
These tools offer encryption, access controls, and auditing capabilities. If you are self-hosting Next.js or want to add an extra layer of safety to ensure no environment variables leak into the deployed version, you can use a tool like Trufflehog to scan the build artifacts.
Bugs happen. When errors are thrown on the server, they are eventually rethrown in Client code to be handled in the UI. The error messages and stack traces might contain sensitive information, such as (credit card number) not being a valid phone number.
React doesn't emit errors or rejected promises to the client in production mode. Instead, a hash representing the error is sent. This hash can be used to associate multiple of the same errors together and associate the error with server logs. React replaces the error message with its generic one. In development mode, server errors are still sent in plain text to the client to help with debugging.
For production workloads, it's important always to run Next.js in production mode. The development mode does not optimize for security and performance.
Custom Route Handlers and Middleware are considered low-level escape hatches for features that cannot be implemented using any other built-in functionality. This also opens up potential foot guns that the framework otherwise protects against. With great power comes great responsibility. As mentioned above, route.tsx routes can implement custom GET and POST handlers which may suffer from CSRF issues if not done correctly.
Middleware can be used to limit access to certain pages. It's best to do this with an allow list rather than a deny list. It can be tricky to know all the different ways to access data, such as if there's a rewrite or client request.
For example, it's common to think only about the HTML page. Next.js also supports client navigation that can load RSC/JSON payloads. In the page router, this used to be in a custom URL.
To make writing matches easier Next.js App Router always uses the page's plain URL for initial HTML, client navigations, and server actions. Client navigations use ?_rsc=search param as a cache breaker.
Server actions live on the page they're used on and inherit the same access control. If Middleware allows reading a page, you can also invoke actions on that page. You can ban the POST HTTP method to limit access to Server actions on a page.
Encryption is converting data into a form that unauthorized users cannot read. It is a powerful tool for protecting sensitive data, such as:
There are many ways to encrypt data in your Next.js application. Some of them include:
Implementing HTTPS ensures that data transmission between the client and server is encrypted, protecting it from eavesdropping and interception.
Use JavaScript libraries like CryptoJS or the Web Crypto API to perform encryption on the client side before transmitting data to the server, ensuring data remains encrypted during transit.
In cases where you need to display sensitive data, consider implementing data masking or redaction techniques to show only a limited portion of the data, such as the last four digits of a credit card number, rather than displaying the entire sensitive value.
Data can be securely transmitted between the client and server using JWTs that can be signed and optionally encrypted to ensure data integrity and confidentiality.
Local storage presents security risks due to plaintext data storage, creating vulnerabilities. To mitigate unauthorized decryption and provide secure user authentication, consider using a library like React Secure Storage to enhance security by dynamically generating unique encryption keys, effectively addressing localStorage’s security limitations.
Server components, client components, server-side rendering, and server actions can be confusing. Next.js has a video on static vs. dynamic rendering and docs on server actions, mutations, and data fetching patterns. Still, it’s too easy to accidentally expose server-side code to the client. This can expose credentials or cause unexpected data leaks.
One way to guard against this is to use server-only (NPM) when you want to guarantee they will never be used on the client. The build will fail if a client component tries to use a server-only module.
Install the package and then add this to the top of your files that should only ever execute on the server: import "server-only"
All bugs result from human errors during app development. While such errors tend to reduce as your experience improves, sometimes you can miss a bug until it gets to production and becomes a significant security issue.
TypeScript is a typed superset of JavaScript that can help to improve the security of a Next.js application by catching errors at compile time. It improves code readability, reduces runtime errors, and improves code maintainability.
This can help to prevent a variety of security vulnerabilities, such as:
These errors occur when a variable is dereferenced but contains the value null. Typescript can help prevent these errors by requiring all variables to be initialized before use.
These errors occur when a value of one type is assigned to a variable of another type. Typescript can help to prevent these errors by checking the types of variables and expressions at compile time.
These errors occur when an array is accessed with an index outside its bounds. Typescript can help prevent these errors by checking the index of array accesses at compile time.
Securing API routes in Next.js usually revolves around implementing reliable authentication strategies. This often leverages JSON Web Tokens (JWT) or external libraries like NextAuth.js. JWT is handy when managing user sessions securely since it includes encoding the data to safeguard it.
NextAuth.js is a robust tool that provides an easy-to-setup authentication solution with various providers like:
It's not a silver bullet. When deciding your authentication strategy, consider the complexity of your application, the level of user interaction, and the specific data you're looking to protect.
import { getSession } from 'next-auth/react';
export default async function handler(req, res) {
const session = await getSession({ req });
if (!session) {
res.status(401).json({ error: 'Unauthorized' });
return;
}
// Handle the protected logic here
// ...
res.status(200).json({ success: true });
}
Aside from securing API routes, it's also essential to consider how you handle data in your Next.js app, mainly because of the diversity of the data handlers. There are several models, including HTTP APIs recommended for large existing projects, the Data Access Layer recommended for new projects, and Component Level Data Access. Each model has potential vulnerabilities, but they can all be made secure with careful consideration and implementation.
In the case of Component-Level Data Access, each component has its direct data access point. This ensures that only the data needed by that component is fetched, reducing the attack surface area but also requiring more granular security checks. On the other hand, using the Data Access Layer method, you can centralize data access security, which simplifies checks and validation but may expose more data points to malicious actors.
import { cache } from 'react';
// Cached helper methods make it easy to get the same value in many places
Choosing the right data handling model according to the nature and scale of your app is crucial to ensure a robust security posture. The choice between HTTP APIs, Data Access Layer, or
Component Level Data Access should consider the app's complexity, the amount of data being handled, and the required authorization level. Implementing these concepts can create a secure, maintainable, high-performing Next.js application.
Maintaining security in API routes and data handlers is about understanding the unique architectural landscape of your Next.js app, and thoughtfully implementing security measures. With the shifting nature of security threats, consistently updating and reevaluating these measures remains necessary for all Next.js developers.
All server actions can be invoked by plain <form>, which could open them up to CSRF attacks. Behind the scenes, server actions are always implemented using POST, and only this HTTP method can invoke them. This prevents most CSRF vulnerabilities in modern browsers, particularly because same-site cookies are the default.
Server actions in Next.js 14 also compares the origin header to the host header (or X-Forwarded-Host) as an additional protection. If they don't match, the Action will be rejected. In other words, server actions can only be invoked on the same host as the page that hosts it. Ancient, unsupported, outdated browsers that don't support the Origin header could be at risk.
Server actions don't use CSRF tokens; therefore, HTML sanitization is crucial. When Custom Route Handlers (route.tsx) are used instead, extra auditing can be necessary since CSRF protection has to be done manually there. The traditional rules apply there.
When it comes to authentication and authorization in Next.js, implementing these security measures effectively is vital for safeguarding your application. Secure authentication ensures that only legitimate users can access your application, and proper authorization ensures they can only perform actions and access data they're permitted to.
A popular library for handling authentication in Next.js is NextAuth.js. This library simplifies adding authentication to your app by supporting various providers like Google, GitHub, and even custom authentication solutions. Using NextAuth.js, you can easily integrate secure login mechanisms, manage user sessions, and handle token management.
Best practices for managing user sessions and tokens include:
Avoid storing sensitive tokens in local storage or cookies without the HttpOnly flag.
Ensure cookies are marked as safe and HttpOnly to prevent client-side access.
Regularly rotate tokens and invalidate old ones to minimize the risk of token theft.
Monitoring and logging are fundamental for maintaining the security of your Next.js application. They help detect suspicious activities, identify potential security breaches, and respond promptly to incidents. Monitoring tools provide real-time insights into your application's performance and security posture.
Tools are great for monitoring Next.js applications like:
These tools can collect metrics, monitor system health, and visualize data on dashboards, helping you keep an eye on the application's behavior.
Setting up alerts is equally essential. By configuring alerts for unusual activities, such as multiple failed login attempts or unexpected changes in traffic patterns, you can respond swiftly to potential security threats. Proper logging practices involve capturing detailed logs of user activities, errors, and system events. Ensure logs are stored securely and regularly reviewed to identify and mitigate security risks.
By focusing on secure authentication, effective session management, and robust monitoring and logging practices, you can significantly enhance the security of your Next.js applications. These measures protect your application from unauthorized access and help you stay vigilant and prepared to tackle any security challenges.
Alerty is a cloud monitoring service designed to help developers and small teams. It offers application performance monitoring, database monitoring, and incident management. Whether you are working with NextJS, React, Vue, or Node.js, Alerty has got your back. It supports various technologies and databases, including:
With Alerty, you can track crucial metrics like CPU usage and memory consumption, providing insights to optimize your systems for performance.
Alerty's quick incident management tools can help you identify and resolve problems efficiently when issues arise. Alerty offers Real User Monitoring (RUM) to optimize your users' experience. By understanding how users interact with your applications, you can make informed decisions to enhance their experience and overall satisfaction.
Alerty doesn't stop monitoring your application's performance; it also covers your dependencies. Whether you rely on the Stripe API, OpenAI, or Vercel, Alerty can help you monitor these services. By monitoring your dependencies, you can ensure your application runs smoothly and proactively address any potential issues.
Setting up monitoring tools can be daunting, but Alerty aims to simplify this process. By leveraging artificial intelligence (AI), Alerty can streamline the setup, making it easier for developers to monitor their applications quickly. This approach saves time and provides a cost-effective solution compared to other monitoring tools.
Alerty integrates with tools like Sentry, offering a seamless experience for developers. This integration can help you streamline your development process and resolve issues faster. Alerty is designed to be user-friendly, allowing developers and small teams to set up monitoring quickly. With its ease of use and efficient incident management, Alerty is an ideal choice for an affordable and effective monitoring solution.
Unlock the full potential of your NextJS applications with Alerty's free APM solution and advanced NextJS logging capabilities. Start now to enhance performance, security, and user experience effortlessly.