Code Monkey home page Code Monkey logo

Comments (7)

shuding avatar shuding commented on July 20, 2024 1

Hey! There're two issues with this, one is that the unused export wasn't properly tree-shaken where we will try to address.

This can lead to developers accidentally exposing endpoints that they didn't mean to and don't ever consume on the client.

Totally understand the concern but this is not exactly the case here. In the reproduction you copied the header of the request to the previous function (which has a cryptographically hashed id), and then switched to the new function in the code. This is only achievable on development because once you run it on production mode, that previous id won't be exposed anywhere if unused.

We're also adding hash salt rotation to production build, so rebuilds will be protected in this case and all ids will change. I think that will fully address the concern here.

from next.js.

RhysSullivan avatar RhysSullivan commented on July 20, 2024

This is only achievable on development because once you run it on production mode, that previous id won't be exposed anywhere if unused.

@shuding are you sure the id won't be exposed anywhere if unused in a production build? I'm able to see it in the JS that's sent to the client when doing npm run build && npm run start

repro steps:

  1. npm run build
  2. npm run start
  3. Open dev tools to page-{}.js
  4. Look in dev tools and see it's included, I've attached a screenshot here with the line highlighted where the id is exposed
    image

from next.js.

shuding avatar shuding commented on July 20, 2024

@RhysSullivan That id you saw was for the exposed action (the one you are using inside <button onClick={...}>). The other one's id, which isn't used by the client, won't be seen in the client JS files.

from next.js.

RhysSullivan avatar RhysSullivan commented on July 20, 2024

@shuding I deployed the repo to Vercel for further verification https://next-unused-server-actions.vercel.app/

The JS payload is https://next-unused-server-actions.vercel.app/_next/static/chunks/app/page-eab1e6231173d707.js

Inside of that payload, there are 2 action ids listed

6fd2c8e1175bb0510320a3360aea26160ec5e722 - getSignedInUser which is called from the client

4c92e15aecb3e95ebc647ac038a361814d41cb48 - getAllUsersPrivateDoNotLeak which is never referenced on the client

Included in this screenshot to hopefully make it clearer, labels are as follows:

1 - Function which isn't meant to be exposed return body
2 - Only place actions are being called on the client, it's just calling getSignedInUser
3 - Action id of getAllUsersPrivateDoNotLeak
4 - Return value of calling that action, validating it's the same value as 1
5 - JS bundle on the client that has the action ids
6 - Action id of getSignedInUser
7 - Action id of getAllUsersPrivateDoNotLeak
image

from next.js.

RhysSullivan avatar RhysSullivan commented on July 20, 2024

Hey @shuding am I able to provide any more information to help debug / repro this?

from next.js.

RhysSullivan avatar RhysSullivan commented on July 20, 2024

Hey @shuding, do the repro steps I listed make sense for seeing the unused action id in the client side bundle? Let me know if I can provide more info, thanks

from next.js.

shuding avatar shuding commented on July 20, 2024

Yes @RhysSullivan thanks that’s very helpful, I’ll take a look!

But also keep in mind that Server Actions are public API endpoints even though they feel like internal function calls. So you’ll still need authentication layer for them.

from next.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.