Security

/

Introduction

Security ➙ Trustworthiness ➙ Reputation
👺 Myth : NextJS is secure by default
XSS (Cross-Site Scripting)
CSRF (Cross-Site Request Forgery)
SQL Injection & More
CORS (Cross-Origin Resource Sharing)

Why security matters? Security ensures your blogging app remains trustworthy. A single vulnerability can expose user data or crash your site, ruining your reputation.

Many think NextJS’s features like JSX escaping make apps bulletproof. Wrong—you need deliberate steps to secure it. In this lecture we’ll secure our blogging app where users read posts and admins manage content, facing threats like XSS and CSRF.

With XSS or Cross-Site Scripting), hackers inject scripts into comments, stealing user data and sessions. Our app’s comment section is a prime target.

CSRF or Cross-Site Request Forgery happens when malicious sites trick other sites thinking that requests are coming from the original site, for example tricking admins into deleting posts. APIs in NextJS need protection agains CSRF.

With SQL Injection, unprotected creation of queries leading to harmful queries combined with weak authentication can expose data. Today, we’ll secure our database and admin panel.

A lot of issues can be solved with CORS, or Cross-Origin Resource Sharing controls, which domains can access your API, preventing unauthorised sites from fetching data. So, let's dive in and see how we can implement protection against these threats and apply CORS to our API.

Security

/

XSS

      import { render } from 'react';

const post = {
  date: '01/01/2025',
  content: `<p>
<h1>My Post</h1>
<b>To be</b> or <em>not to be</em>
<script>console.log("👺 buhuhaha")</scri`+`pt>
</p>`
}

function Post({ post }) {
  return (
    <div>
      <div>{post.date}</div>
      <div>{post.content}</div>
    </div>
  )
}

render(<Post post={post} />);

Security

/

XSS

      import { render } from 'react';

const post = {
  date: '01/01/2025',
  content: `<p>
<h1>My Post</h1>
<b>To be</b> or <em>not to be</em>
<img src=x onerror="console.log('👺 XSS')">
</p>`
}

function Post({ post }) {
  return (
    <div>
      <div>{post.date}</div>
      <div 
        dangerouslySetInnerHTML={{ 
          __html: post.content 
        }} />
    </div>
  )
}

render(<Post post={post} />);

Security

/

XSS

      import { render } from 'react';

const post = {
  date: '01/01/2025',
  content: `<p>
<h1>My Post</h1>
<b>To be</b> or <em>not to be</em>
<img src=x onerror="console.log('👺 XSS')">
</p>`
}

function sanitize(source: string) {
  return source
    .replace(/on\w+=".*"/g, "") 
}

function Post({ post }) {
  return (
    <div>
      <div>{post.date}</div>
      <div 
        dangerouslySetInnerHTML={{ 
          __html: sanitize(post.content) 
        }} />
    </div>
  )
}

render(<Post post={post} />);

Security

/

CSRF

Security

/

CSRF

    // components/AdminPanel.tsx
import { useSession } from 'next-auth/react';
import { getCsrfToken } from 'next-auth/react';

export default function AdminPanel({ postId }: { postId: number }) {
  const { data: session } = useSession();

  const deletePost = async () => {
    const csrfToken = await getCsrfToken();
    await fetch('/api/posts/delete', {
      method: 'DELETE',
      body: JSON.stringify({ 
        csrfToken,
        postId 
      }),
    });
  };

  if (session?.user.isAdmin) {
    return <button onClick={deletePost}>Delete Post</button>;
  }
  return null;
}

// app/api/something/route.ts
import { cookies } from 'next/headers'
import { NextResponse, NextRequest } from 'next/server'

export async function POST(req: NextRequest) {
  const body = await req.json()

  const submittedToken = body.csrfToken

  const cookieStore = await cookies()
  const csrfCookie = cookieStore.get('next-auth.csrf-token')?.value
  const realToken = csrfCookie?.split('|')[0] // token|hash

  if (
    !submittedToken || !realToken || 
     submittedToken !== realToken) {
    return NextResponse.json(
      { error: 'Invalid CSRF token' }, 
      { status: 403 }
    )
  }

  return NextResponse.json({ message: 'CSRF valid!' })
}

Use CSRF tokens
SameSite cookies
Double-submit cookies

You can protect yourself from CSRF in multiple ways.

First, you can use CSRF tokens, which are unique tokens for admin actions like deleting posts and verifying server-side. We will show you how to do that in NextJS very soon.

Second, you can tighten security of your cookies and issue same site cookies which prevent cross-origin requests from using session cookies.

Last, you can also double-submit your cookies as tokens in headers for extra security.

Now, let's take a look how we can solve the CSRF with CSRF token.

First, on the client, we obtain a CSRF token from the server. This request would be prohibited to read from another site than ours, and no other website can get access to it.

We add this token to the request.

Then, in API route, we read both tokens from from the body of the request ...

... and from the cookie.

Last, since the cookies can be hijacked by CSRF, we compare the CSFR cookie from the request with the cookie value, and if they differ, we return an error. Problem solved!

Security

/

CORS

    // pages/api/posts/index.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // Set CORS headers
  res.setHeader(
    'Access-Control-Allow-Origin', 
    'https://trusted-domain.com'
  );
  res.setHeader('Access-Control-Allow-Methods', 'GET');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'GET') {
    // Return posts
    return res.status(200).json({ posts: [{ id: 1, title: 'Sample Post' }] });
  }
  return res.status(405).json({ error: 'Method not allowed' });
}

What is CORS?
No CORS = No Control
NextJS CORS Middleware

Cross-Origin Resource Sharing (CORS) controls which domains can access your API or resources such as images, preventing unauthorised sites from fetching data. Our blogging uses CORS to stop malicious sites from reading post data.

Without CORS, any site could request your API, risking data exposure or abuse. Proper CORS policies ensure that only trusted domains interact with your app.

To implement CORS in NextJS you would implement middleware or API route headers to set CORS policies, allowing specific origins for safe API access.

Let's check out an example. This code secures our blog’s API by restricting access to trusted domains and preventing unauthorised data requests.

With Access-Control-Allow-Origin header we can limit the domains which can make requests to our API

With Access-Control-Allow-Methods header we limit the REST methods that can be requested from our API. In this case we limit only GET method.

Last, with Access-Control-Allow-Headers we can limit which headers the server should consider when processing a request.

It's a bit strange that we also need to double-check these values in code because the CORS headers assure that incorrect requests will receive an error, but the body of the API route is still executed. With incorrectly handled CSRF, this approach can still lead to hackers executing unwanted requests on our server. Therefore, even if we prohibit the execution of other methods that GET, we double-check this in our code.

Security

/

Other Measures

ORM for SQL Injection
Secure Authentication, Social Logins
Secure Headers
Manual Testing
Automated Tools (OWASP ZAP)
Fuzzing

Security

/

Wrap up

Key Takeaway : Never trust user input
Use Use Next.js tools wisely tools wisely
Test regularly
Avoid Pitfalls : Skipping audits, ignoring headers

Full Stack Development

Securing Web Applications

Security

Introduction

Security

XSS

Security

XSS

Security

XSS

Security

CSRF

Security

CSRF

Security

CORS

Security

Other Measures

Security

Wrap up