Protected API routes for Firebase | Next.js | Page 1

ivory rock Aug 29, 2024, 8:41 PM

#

Hello everyone,

I'm fairly new to the framework and have a few questions regarding API routes with the NextJS application.

It's fairly simple, a user submits an email to be notified of updates. That email gets stored in a firebase database. There is no sign in for this application so it is public. I've created my API route in the folder structure pages > api > consent > email

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  if (req.method === 'POST') {
    try{
      const dbReference = db.database().ref(`/marketing/awesome-sauce`)

      const result = res.json({
        message: "Email Successfully Saved"
      })

      const { email } = req.body

      await dbReference.update({
        email: email,
      })

      res.status(200).json({ result })
    } catch(error) {
      console.error(error)
      res.status(500).json({error: "Internal Server Error"})
    }

  } else {
    const result = res.json({
      error: "HTTP Method not Supported"
    })

    res.status(500).send({result})
  }
}

Pretty boiler plate code. I need to make sure that no one can do anything malicious if they know what the route is. I'm looking for a way to protect this route, maybe have it only allow the route to be called if it's coming from the application? I'm assuming there is a middleware solution but am having trouble finding documentation on doing something like this. Everything I find deals with a user authorization and sign in.

simple jewelBOT Aug 29, 2024, 8:41 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

placid summit Aug 30, 2024, 2:09 AM

#

Impossible. There is no way to check for sure whether a request came from your frontend or from elsewhere. They are independent http requests after all and anyone can copy the full details of http requests they make.

Closest you can get is a captcha + rate limiting, if you want to keep this thing public.

forest cairn Aug 30, 2024, 6:23 PM

#

This refactored code below will ensure that only requests from allowed domains or your application's domain are processed, adding an extra layer of security to your API endpoint.

import type { NextApiRequest, NextApiResponse } from 'next';
import { parse } from 'url';

// Define allowed domains
const ALLOWED_DOMAINS = ['your-allowed-domain.com', 'localhost']; // Add your allowed domains here
const APP_DOMAIN = process.env.APP_DOMAIN || 'your-app-domain.com'; // Set your app's domain

function isAllowedOrigin(origin: string | null): boolean {
  if (!origin) return false;
  
  const hostname = parse(origin).hostname || '';
  return ALLOWED_DOMAINS.includes(hostname) || hostname === APP_DOMAIN;
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // Check origin
  const origin = req.headers.origin;
  if (!isAllowedOrigin(origin)) {
    return res.status(403).json({ error: "Forbidden: Invalid origin" });
  }

  if (req.method === 'POST') {
    try {
      const dbReference = db.database().ref(`/marketing/awesome-sauce`);
      const { email } = req.body;

      await dbReference.update({ email: email });

      res.status(200).json({ message: "Email Successfully Saved" });
    } catch (error) {
      console.error(error);
      res.status(500).json({ error: "Internal Server Error" });
    }
  } else {
    res.status(405).json({ error: "HTTP Method not Supported" });
  }
}

placid summit Aug 31, 2024, 5:49 AM

#

and you can always just spin up postman, add your-app-domain.com to the origin header, and the entire isAllowedOrigin check falls apart.

blocking all requests except those coming from the frontend is impossible. the above code is certainly a mitigation against the weaker attackers, but it's false security and very easy to bypass.

ivory rock Aug 31, 2024, 12:25 PM

#

Thank you for the responses. I was thinking of going the route of a CSRF token. I’ve been trying some packages out but unfortunately it depends on server props and I’m already using static props, which don’t play well together 🥺

ivory rock Sep 3, 2024, 11:23 AM

#

Circling back here... I was aiming at using CSRF tokens but the current way the NextJS application I'm working on was built won't allow the use of server side props (the way the SSG and lazy loading are setup with static props).

So the end solution was going the route of reCaptcha. Thank @placid summit for the direction and follow ups and @forest cairn for the suggestion. reCaptcha was the winning solution here. Maybe I'll do the "allowed domain" approach too, security is redundancy 😅.

#Protected API routes for Firebase