Is it safe to pass props? Can props be changed from console when react is in production?

[zeronumbers]

Summary

I use nextjs in a container, nextjs is built during image creation without envs. Nextjs cache is disabled for pages that use those envs to avoid build errors.

Because I use nextjs in container I don't want to use NEXT_PUBLIC prefix which bakes in envs as strings (otherwise everyone would have to rebuild image with their own envs). Therefore I must access envs on server component and pass them to client component as props.

The props I pass are base url and public key, so this is not secret information.

Apparently using NEXT_PUBLIC prefix inside the component that will use this env is safe enough. Is it safe to pass props from server to client component and from client to client component?

I know that there is react dev tools which allows you to change props, but it only works when react is in dev, in prod you can only observe props but cannot change them.

Here is more detailed example:

there is a server page.tsx component - this is where I access envs
it then renders client component - envs are passed as props
that component - renders stripe Elements component (this is where primary key is used to get stripe and then pass it to stripe Elements component) and inside as children renders client component that is a form (base url is passed to this form)
inside body of that form component - this is where base url is used in a function that will handle submit of form, return_url is constructed by adding to base url to some path, on success user will be redirected to this url.

Additional information

No response

Example

No response

[icyJoseph]

Well, first of all, don't be relying on client side guard, safeties or guarantees. People who want to mess around with your backend, will most likely, skip the browser step, and use tooling to attack your backend instead. Maybe I lack a bit of authority here, but, see this answer by the maintainer of Redux and RTK, https://www.reddit.com/r/reactjs/comments/f82w1e/comment/fiirzw1/

Generally it should be safe though. The one thing you'd be wanting to be careful with are query parameters, see here, #66560, but from what I tested, those were properly escaped... and yah, it doesn't directly change props passed to components or whatever.

That being said, https://nextjs.org/blog/security-nextjs-server-components-actions this article, in specific this section, https://nextjs.org/blog/security-nextjs-server-components-actions#component-level-data-access might be of interest.

You can also use, https://rsc-parser.vercel.app/, to see which data, is being passed, and how the React tree is being built.

So I guess, I am wondering now, what is it actually you are asking for here, maybe a diagram, or pseudocode can help out?