What To Watch Out for When Using Next’s New Server Actions

Data might be visible to the client

source: the author

Server actions are Next’s new feature, enabling server-side data mutation.

This feature can be used for a variety of valuable things. The most famous example so far is enhancing forms. We can create an HTML form in our page’s file and handle the submission directly, thanks to server actions. Yet, there is a minor security issue many people are unaware of.

Let’s have a look at the following code:

export default function Home() {  
  // must be kept secret 
  const secretKey = '12345'

  async function serverAction() {
    'use server'
    // this is logged on the server:
    console.log('server function triggered', secretKey)
  }

  return (
    <form action={serverAction}>
      <button type='submit'>Call server action</button>
    </form>
  )
}

The function serverAction is the actual server action, which can be called from the UI. When clicking on the button of the form, the console.log is executed on the server — that’s it. Also, we store e. g. an API key or any other secret on the top level of our component. Here is the problem.

If we open the developer tools in the browser, we can notice one thing: