Calling Server Action in Server Components
Answered
aardani posted this in #help-forum
aardaniOP
What is the harm of calling server action in Server Components like this?
Note: its okay to call external function in here. This question is asking specifically about using external function that has been marked with "use server" at the top of the file.
export default async function Home() {
const data = await getData() //function with "use server"
return (
<main>
{data}
</main>
)
}Note: its okay to call external function in here. This question is asking specifically about using external function that has been marked with "use server" at the top of the file.
Answered by joulev
getData will have a server-side address. anyone with that address can trigger the action and get the returned value. so if you don't secure getData() properly with auth, you risk exposing sensitive data27 Replies
Plott Hound
also interested in the answer to this.. i always felt like it was doing the same thing since i assume your example is fetching data
@aardani What is the harm of calling server action in Server Components like this?
tsx
export default async function Home() {
const data = await getData() //function with "use server"
return (
<main>
{data}
</main>
)
}
Note: its okay to call external function in here. This question is asking specifically about using external function that has been marked with "use server" at the top of the file.
getData will have a server-side address. anyone with that address can trigger the action and get the returned value. so if you don't secure getData() properly with auth, you risk exposing sensitive dataAnswer
hence: don't make things server actions unless that is necessary
functionality-wise i think your example works the same way with or without the
use server inside the file declaring getData()aardaniOP
How can I check the server-side address?
Plott Hound
I'm not aware of the security implications of server actions, I think i assumed they were secure by default since they are not tied to a physical url like route handlers are. how would someone trigger the action that isn't authorised?
aardaniOP
How to prove your statement?
@Plott Hound I'm not aware of the security implications of server actions, I think i assumed they were secure by default since they are not tied to a physical url like route handlers are. how would someone trigger the action that isn't authorised?
aardaniOP
Under normal usage, ideally you can copy the request information and trigger it outside of the aplication
but that in itself has been proven a bit difficult to do
But this post is more interested regarding using "use server" file that is outside of its usage, i.e in normal server environment
@aardani How can I check the server-side address?
it's not easy. but compared to "allowing attackers to run it if they can solve a very hard problem", "not allowing attackers to run it at all" is a safer approach, no?
i don't know how react works behind the scenes. it might list all server addresses somewhere. we shouldn't rely on what we don't know, especially for security stuff
@aardani Under normal usage, ideally you can copy the request information and trigger it outside of the aplication
Plott Hound
thanks, apologies if it looked like i was hijacking the thread, im very interested in your question
@Plott Hound I'm not aware of the security implications of server actions, I think i assumed they were secure by default since they are not tied to a physical url like route handlers are. how would someone trigger the action that isn't authorised?
server actions don't have a URL but they have the addresses which is as good as URLs
aardaniOP
problem is i have to separate the GET functions with the rest of the mutation functions 🙃
i think aliasing the addresses to URLs is a good idea.
when you use any backend services online, you don't know what URLs it has. it could have
when you use any backend services online, you don't know what URLs it has. it could have
/some/very/random/path that end users are not supposed to know. does that make it acceptable for the admin of that backend to expose sensitive information in that random path without enforcing auth?i think the same answer applies here. security through obscurity, as yall know, is not a good idea
like, now if i go to
facebook.com/zuck-is-the-best-in-the-world and i get the list of all phone numbers ever registered to facebook, i would be looking at a big bounty and whoever made that route would be fired tomorrow@aardani problem is i have to separate the GET functions with the rest of the mutation functions 🙃
aardaniOP
Following the advice to not rely on what we don't know, it gave me an idea how I can organize my methods in a file:
// data.ts
export async function getData(){
}
export async function postData(data){
"use server"
}i doubt this works though. does it work?
i put read functions and write functions to different files
@joulev i put read functions and write functions to different files
Plott Hound
is this just for organisation or is there a higher purpose?
@Plott Hound is this just for organisation or is there a higher purpose?
write functions are server actions => must have
read functions are not server actions => should not have
use serverread functions are not server actions => should not have
use serverPlott Hound
oh sorry i misunderstood, thanks!
aardaniOP
It should work since i've used that pattern before
aardaniOP
https://x.com/dan_abramov2/status/1752824531733934367?s=20 I asked dan abramov's opinion about this so joulev's mindset is a pretty good advice to think that any server action would create an endpoint at runtime