Hardening Next.js Application: 4 Key Strategies to Ensure Robust Protection

Hardening your Next.js application is vital to safeguarding user data and maintaining trust. While Next.js comes with built-in security features, developers must adopt additional measures to protect against vulnerabilities. Below, we outline four essential practices to enhance the security of your Next.js app.

1- Data Validation and Sanitization

• While Next.js benefits from React’s built-in security features, relying solely on them is insufficient. Always approach data with caution—whether it originates from user inputs or external APIs, thorough validation is a must to mitigate potential vulnerabilities.
• TypeScript’s type checking provides a strong foundation, but it cannot guarantee data validity; for instance, a string might have the correct type but still contain harmful content or fall outside acceptable parameters. To address this, libraries like Zod or Valibot offer schema-based validation, allowing you to define and enforce strict rules for the structure, type, and constraints of data from users or APIs. Adopting a rigorous validation approach enhances security, and pairing it with clear, user-friendly error messages ensures users understand and can resolve issues effectively, maintaining both system integrity and a positive user experience.

// 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 for validating data related to the "teams" table
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 selectTeamSchema = 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(),
});

• The dangerouslySetInnerHTML property introduces significant security risks, as it allows raw HTML to be injected directly into the DOM, bypassing React’s security safeguards. This makes your application vulnerable to Cross-Site Scripting (XSS) attacks, where malicious scripts can execute in the user’s browser. To avoid these risks, dynamically generate HTML within your components using props, state, or other secure mechanisms. This approach enables React to sanitize the output, protecting your application and users from XSS vulnerabilities.
  

import React from 'react';

const RiskyComponent = ({ htmlContent }) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
};

// Example usage
const userInput = "<img src='invalid-url' onerror='alert(\"XSS Attack!\")' />";
<RiskyComponent htmlContent={userInput} />;

• Using innerHTML to set content can expose your application to Cross-Site Scripting (XSS) attacks if not handled with extreme caution. This method parses and renders HTML tags, making it possible for malicious scripts to execute. To mitigate this risk, prefer using innerText when dealing with plain text content. Unlike innerHTML, innerText treats input as plain text, ensuring that HTML tags are not parsed and preventing the execution of any injected scripts, thereby enhancing the security of your application.

// Unsafe Example with innerHTML:
const riskyContent = `<img src="invalid-url" onerror="alert('XSS Attack!')" />`;
document.getElementById('riskyDiv').innerHTML = riskyContent;

// Safe Alternative with innerText:
const safeContent = "This is plain text content.";
document.getElementById('safeDiv').innerText = safeContent;

2- Safeguard Environment Variables

• Next.js loads environment variables automatically and intelligently restricts environment variables to server-side code. This means they are not directly exposed to the client side and helps prevent accidental data leaks.
• If you need to make a variable accessible on the client side, add NEXT_PUBLIC_ in front of it. However, be careful – any value you expose in this way becomes visible to anyone who examines your website’s code.
• Avoid storing API keys, database credentials or other sensitive confidential information directly 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). To securely store and manage sensitive credentials, use a specialized secrets manager such as HCP Vault Secrets, AWS Secrets Manager, 1Password, Infisical or Doppler. These tools offer robust encryption, access controls and auditing features.

3- Prevent Code Leakage

• It is very easy to accidentally disclose 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 that they will never be used on the client. If a client component tries to use a server-only module, the build will fail.
• Install the package and then add it to the top of your files that should only run on the server:

import "server-only";

4- Configure Security Headers

• Security headers are powerful tools that instruct browsers on how to handle your website content.
• The most important headers for your Next.js app:
  • Content Security Policy (CSP):
    • This important header helps prevent Cross-Site Scripting (XSS), code injection and data theft by specifying which resources (scripts, styles, images, etc.) are allowed to be uploaded on your site.
  • Strict-Transport-Security (HSTS):
    • Tensures secure communication and prevents downgrade attacks by forcing searchers to interact with your site only over HTTPS.
  • X-Content-Type-Options:
    • Tprevents searchers from misinterpreting files by preventing them from “sniffing” content types.
  • Permissions-Policy:
    • This header reduces the attack surface by allowing you to control which browser features and APIs can be used for scripts running on your site.
• The next-safe package provides a simple way to configure and add these security headers to Next.js.
• For general JS applications, the Helmet package is a popular choice. Google’s strict-csp project can also be used to set CSP headers as a generic library or WebPack plugin.
• You can visit Security Headers to check which security measures might be missing from your website. This tool provides a detailed analysis of your HTTP response headers to help you improve your site’s security.

What is Next.js?

Next.js is a popular React framework used for developing React-based applications. Next.js provides additional features and performance improvements for React applications. Next.js stands out with features such as server-side rendering, dynamic routing, static site generation and makes developing with React more efficient.

Key Features of Next.js

Next.js offers a powerful set of features that make it an ideal framework for building modern web applications. Some of its key features include:

• Server Side Rendering (SSR):
  • React has the ability to render its components server-side. This allows the HTML content of the page to be rendered on the server and sent to the browser, resulting in a faster initial load and better SEO optimization.
• Static Site Generation (SSG):
  • It can statically render specific pages at build time. This ensures high performance and scalability, especially common in projects such as content management systems (CMS) or blogs.
• Client-Side Rendering (CSR):
  • Next.js can also render client-side instead of server-side rendering. This is similar to the classic way React works. Developers can choose the type of rendering according to their needs.
• Hot Module Replacement (HMR):
  • Next.js ensures that changes made during the development process are instantly reflected in the browser without requiring a page reload. This increases development speed.
• Dynamic Routing:
  • While React itself does not have a built-in routing solution, Next.js has a powerful routing system that automatically routes your pages based on file structure. It is also possible to create dynamic routes.

Vulnerabilities Discovered in Next.js

• At the time of this article, the latest version of nextjs is 15.0.3, while the top version with the vulnerability is 14.0.1
• It’s important to note that even if you are using a vulnerable version, there is no guarantee that your system will be directly affected by the vulnerability. Specific conditions may need to be met for the vulnerability to be exploited, or you may not even be using the vulnerable module. However, attackers can manipulate conditions to exploit vulnerabilities, making your system more susceptible. Therefore, it is always best practice to use the latest version to minimize the risk and ensure your system remains secure.
• You can visit the following link to explore a detailed list of vulnerabilities associated with each version:
  https://www.cvedetails.com/version-list/0/87327/1/