Search code examples
javascriptreactjsheadercode-splitting

Include header when chunks are fetched with code splitting

I've used code splitting to seprate restricted parts of my app into different chunks. This is working great so far, now I would like to ensure that the files themselves don't get served unless authenticated. I was thinking of using ngx_http_auth_request_module

http://nginx.org/en/docs/http/ngx_http_auth_request_module.html#auth_request

Which allows to send a sub-request before serving certain files. How can I ensure that certain headers are always send as part of the HTTP request when React wants to fetch the necessary chunks?

Solution

  • I have trouble understanding why you would need to prevent unauthenticated malicious users to have access to your static chunks.

    Dynamic imports and code splitting are mainly used to reduce the bundle size for large applications as users won't necessarily need everything.

    In order to secure your app you need to prevent users from seeing or tampering with data they do not have access to. This means the security lies with the API your app is talking to.

    What I do:

    • Reject unauthenticated requests to the API
    • Keep a token client-side on authentication
    • Pass and check the token on all requests
    • Burn the token when obsolete and redirect to login
    • Notify, redirect users when they do not have access to some data or better not displaying content they do not have access to

    I'm sure you already did what I wrote above, what I want to emphasize is that chunks are basically empty UI filled with data from the secured API.

    Let's say I have bad intentions and I bypass client-side routing in order to have access to the restricted chunk. It will be an empty UI with secured API routes, I won't be able to do anything with it.

    In case you have a very specific need, you might need to write a webpack plugin.