Securing Server-Rendered Applications – Next.js Case

Rate this content
Bookmark

Next.js deep integration between the client and the server makes developing fast JavaScript applications a breeze. And it's also the worst nightmare of your security team. Let's discover a few security patterns for server-rendering frameworks like Next.js.

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

OWASP is a non-profit foundation that publishes a top 10 list of the most common security risks for web applications. Applying the OWASP top 10 to Next.js can help developers secure their applications against common vulnerabilities.

Developers should use secure, non-reversible hashing algorithms for storing sensitive data like passwords, rather than reversible encryption algorithms.

Common vulnerabilities include server-side request forgery (SSRF), security misconfigurations, injection attacks, and cryptographic failures, among others.

Proper security logging and monitoring are crucial because they allow developers to detect attacks on critical parts of an application, such as payment and account creation systems.

SSRF is a security vulnerability where an attacker can make requests from a server using its privileges, potentially accessing private infrastructure or services. It is important to mitigate SSRF in Next.js applications.

Eric Burel is a freelance engineer from France, a member of the Devo Graphics collective, and a Next.js trainer and course author.

The talk focuses on securing server-side applications in the context of Next.js, highlighting the challenges and security considerations for front-end developers transitioning to full-stack development.

Security headers can prevent vulnerabilities like man-in-the-middle attacks by enforcing HTTPS connections and restricting certain JavaScript features. Proper configuration of these headers is crucial for web security.

A supply chain attack occurs when a hacker compromises a dependency used by an application, potentially affecting all applications using that dependency. Developers should regularly update dependencies to prevent such attacks.

Developers can improve security by staying informed about common risks, following best practices, using proper security headers, and ensuring regular updates to dependencies and frameworks.

Eric Burel
Eric Burel
20 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10. Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges. Security logging and monitoring failures are critical, as proper setup is necessary to detect attacks. Being cautious with npm packages, addressing identification and authentication failures, and updating vulnerable components are crucial for application security. Database seeding, security headers, and permissions policies are important for application security. It's important to reduce the criticality of an attack, check strict transport security header, and prevent security issues by following best practices. Understanding CSRF vulnerability, image injection vulnerability, and cryptographic failures is important. Broken access control can result in unauthorized access and should be mitigated. Thank you for watching this talk and stay safe!

1. Securing Server on the Red Apps in Next.js

Short description:

Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10.

Hello, everybody, and welcome to this talk, Securing Server on the Red Applications in the Context of Next.js. My name is Eric Burel. I'm a freelance engineer from France. I'm a member of the Devo Graphics collective that runs the state of JavaScript, HTML, CSS, GraphQL, and now React surveys. I'm a Next.js trainer and course author, and I'm currently writing a course named Next Patterns where I show interactive demonstrations of advanced programming patterns with Next.

These new technologies, Next.js, server-side rendering technologies, bring a lot of new challenges for us front-end developers, for us React developers. Because full stack means having a back-end, and a back-end means a lot of trouble for front-end developers and people that have been traditionally writing React front-end applications. Also, these technologies allow us to transparently mix server and client code, JavaScript that runs in the browser and JavaScript that runs on the server. This is a huge source of complexity, despite being a very interesting innovation. So full stack and mixing server and client code can mean a lot of problems, security problems. So it's important to start thinking about security in the context of Next.js applications.

Every new technology can bring new food guns. Food guns are mistakes that developers will systematically tend to do, and some of them could create security vulnerabilities. For instance, do you check authentication in a Next.js layout? This is a question we are going to answer in a few minutes. But first, let's talk about the OWASP. The OWASP is a non-profit foundation that wants your software to be secure. They are really great people. So they publish a top 10 of the most common security risks that web applications are facing. They also do that for mobile applications and even AI applications recently. So applying the OWASP top 10 to Next.js and to full stack server side rendering frameworks more broadly is a very good way to start with security because these are the most common issues. So if you are able to remediate the top 10 vulnerabilities, you already have a very secure application. So let's discover this top 10, and let's try to think how we can apply it to Next.js.

2. Server-Side Request Forgery and Security Logging

Short description:

Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges by passing a URL and initiating requests from the server. Security logging and monitoring failures are also critical, as proper setup is necessary to detect attacks. Software and data integrity failures, including dependency hacks and supply chain attacks, pose significant risks to applications.

Number 10, server-side request forgery, SSRF. These acronyms are really good pronunciation exercises for non-native speakers like me, and also kind of a nightmare on a daily basis, but anyway. The idea is that you let the user pass a URL and you fire the request to this URL from your own server. The problem is that the attacker then benefits from your server privileges. So an example application could be you are crafting an AI summarization service. So the user passes a website URL and you create a summary of the content of the website. The thing is that they could also choose to pass the URL to localhost, and localhost won't be their computer but your server in this case. So they can start firing a request from your server to your own private infrastructure, to other services in your infrastructure, for instance, your database or other similar private services. So it's a bad one. I'm not necessarily giving solutions to each issue. Sorry, because each one of these vulnerabilities or families of vulnerabilities would require its own talk. But at least I'd like you to be aware of the existence of these attacks if you are developing similar applications. And then you can work on the remediations.

Let's go to number nine, security logging and monitoring failures. Basically you are logging junk, but not information. This one is very important because if you don't properly set up your logging system, you don't even see the attacks. So that's really the basis of a security system is to be able to tell when you have an attack. It's not that obvious. So you might want to have logs that are more focused on the critical part of your application like payments, account creation, logging, that are really known to be entry points for attackers.

Number eight, software and data integrity failures. It's a very wide one. So your dependencies are hacked, your CI is hacked. You run deserialized user code. Basically anything that could help to have malicious code in your application. Not just injection. Injection is a specific vulnerability, but more broadly running malware from your application. Supply chain attacks are very popular these days. So this is when one of your dependencies is hacked. They are popular because they are very efficient for attacker. You just hack one application and suddenly you have hacked all the applications that are using a dependency.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplifying Server Components
React Advanced 2023React Advanced 2023
27 min
Simplifying Server Components
Top Content
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
And Now You Understand React Server Components
React Summit 2024React Summit 2024
27 min
And Now You Understand React Server Components
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Workshops on related topic

AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.
Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs
JSNation US 2024JSNation US 2024
148 min
Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs
Featured Workshop
Gregor Biswanger
Gregor Biswanger
In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals.This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems.
Mastering React Server Components and Server Actions in React 19
React Summit US 2024React Summit US 2024
150 min
Mastering React Server Components and Server Actions in React 19
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.

Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.

Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up