Protecting static site data
Hey I was wondering if It's possible to protect a hard coded react / html site. If the site source code can be read / modified by users. What Is the purpose of making login forms with email / pass if it can be bypassed easily (by people that know smth about web)? Is there any way to not let users see a hard coded site?
28 Replies
with next, you can use middlewares
Lets say we have a react site that on a home page shows form that sends a request to our server and if the user is authenticated we set a global state
user to our returned data. Then the user can access protected pages. But still can't a person just modify our source code to disable this protected routes / set user global state manually and see the protected pages?
Kinda newbie question 😄you will have to secure on the server part of the application
pure react cant (client side only)
And how would I do that
only send secure stuff after authorizing the user?
In a traditional React app, the code that is served to the browser is simply a vehicle to retrieve and display data from another place (your API). Unless you're putting protected information inside your site's source code, the source code for your site doesn't really need to be private.
The real protection occurs on the server that is serving the protected data. It will usually use some sort of authentication to verify that whoever is requesting data from it is allowed to do so. The software running there should be much more protected, since it is the real barrier between malicious users and confidential data.
When authoring websites, a common practice is to assume the person accessing the site is always malicious. They'll always be able to get their hands on website code, and so there shouldn't be anything confidential in there unless you're protecting it on the server side before sending it over (this happens in the case of server rendered stuff).
Okey so I guess there is not really a way to protect a data that is just hard coded into my react code and all the confidential data should be stored in my backend and served to authenticated users
and then the page should be hydrated with this data
You could hard code the data into your react code, you'd just need to make sure you have code running on your server that checks the user's authorization for that data, and only serve that site if they've got permission
Ah
And am I able to do this via vercel for example?
no relation
As Neto said, you can use middleware to do so on Vercel, but what framework are you using?
So let's say I request a
https://mywebsite.com with a JWT in Authorization header and if its accepted by my backend then the react site is serverd otherwise there is an error
Thats what u meant?Yeah u could do that, seems risky though
jwt â›”
well
session and cookie then
;D
no
httponly cookie
jwt is fine, doing the auth on the page load rather than an api call is sus
What protected data does your react code contain?
Atm none but It would contain company specific data like charts etc that woudn't be downloaded from the server / db
just hard coded into react
oh? seems a bit odd to hardcode them
Yea It does heh
Anyways How would I do this through next middleware
To serve a specific page to authenticated users
start by looking into middleware is my tip
i haven't had enough experience with middleware to say tbh, the docs should point u in the right direction
Well It looks like I'd just have to return
401 status code instaed of serving a page
seems easyWhile I'm here I'll mention why I think putting pages themselves behind auth is not desirable:
Your app will probably need an API at some point for dynamic content, at which point you'll need a second auth system that operates on API routes rather than middleware. Now you've got two auth implementations, what fun.
You're also mixing trust levels for each page - some React code is public and can be served to anyone (login page), but some must be protected. Idk about you but that makes me nervous, I'd much rather all my React code be public and lock specifically my private data behind an authenticated endpoint. Much clearer separation of concerns imo.
Yeah I think the same way. Much better option would be to create a separate backend and download confidential data from the server while serving empty not hydrated react pages
But the whole Idea of protecting certain pages on a server level felt interesting to me
Will take a deeper look at next middlewares
thanks
This approach wouldn't even be hard with your next app, just serve the private data from
/pages/api and fetch it in your pagesYeah
I will consider those 2 options
anyway thanks
It seems so much cleaner for me
happy to help!