Home > OS >  Next.JS security of directory structure and JSON secrets
Next.JS security of directory structure and JSON secrets

Time:05-31

I have a security question regarding the access of Next.JS directories, and their access requirements.
I have a root folder that has my pages, public, src, styles, models folders.

In the src folder I have a settings.json file that is a empty JavaScript object. The idea is that settings would be added to this file and accessed by api routes, to check settings that could be modified on this settings.json file...
What I am wondering is if the client can actually somehow just read/access the src directory and get the settings.json file.
I want to put secret key's here that way I can easily change secret keys without having to restart my server. So I could just update the secret key live, and have it applied to the settings.json file. Then the update would be live immediately and I don't have to change the environment variables and restart the server.
Is it safe to keep and use a json file in the src directory to store confidential data? If not, is there a way to keep and use a json file for this purpose? Thanks for the help and info.

CodePudding user response:

As juliomalves pointed out client code won't be able to access a directory or file that you have on the server with the exception of the public directory.

Next gives you the ability to serve static assets from [root]/public as documented here

Note: Only assets that are in the public directory at build time will be served by Next.js.

If this directory is ever renamed, these assets are no longer available from a client.

Note: Don't name the public directory anything else. The name cannot be changed and is the only directory used to serve static assets.

"I put a settings.json file right next to that .env file and required it in an api route, could the client somehow download that settings.json file without me purposely sending them the contents/file itself?"

The only way information can be served from an api route is by expressly creating a route to call res[ponse].send() (or res.json()) with data imported from that file. Api routes are not ever bundled on the client side and only ever exist on the server as noted here.

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.

"What I am wondering is if the client can actually somehow just read/access the src directory and get the settings.json file."

As noted above only assets in the /public directory are accessible as files by path. Directories are never accessible in Next as static assets. This is even pointed out in the source code.

send(req, path)
  .on('directory', () => {
    // We don't allow directories to be read.
    const err: any = new Error('No directory access')
    err.code = 'ENOENT'
    reject(err)
  })
  • Related