How to hide most of my JavaScript from users not logged in?

Question

I'm working on a web application. The main parts will be a HTTP API and a front end that uses a lot of JavaScript.

Authentication will be required, so there will be a page where a user logs in. On this page, the front-end code will get credentials from the user, submit them to the HTTP API, and receive a token, which can then be used to access private parts of the HTTP API.

The easy way to implement this is to have the login page reference all the JavaScript code, which means that the login page will have a) the JavaScript that is needed for login and b) the JavaScript that is needed after login. But having (b) is a problem. Even though the JavaScript will be minified, a cracker will be able to read it and find:

• HTTP endpoints;
• how to authenticate to the protected parts of the API;
• what sort of data is expected by the protected parts of the API;
• messages to the user, in HTML templates and other static strings.

The first 3 items could be used to probe, and perhaps attack, the HTTP API. The last item could help with social engineering attacks, or just generally with figuring out what the app does.

So my question is: how do I ensure that, when the user is not logged in, he can't see the JavaScript that is only needed after login?

I'm thinking of something like the following:

• The user navigates to the login page, which contains the bare minimum of JavaScript code.
• The user enters his credentials.
• The JavaScript sends those credentials to the back end and receives a cookie.
• The JavaScript redirects to another page, call it page 2.
• Page 2 references the JavaScript which is used after login, which is stored at a URL that contains a long, cryptographically random string.

The last point can be improved by having the back end require the client to send a valid cookie when it requests the JavaScript.

Is that a reasonable plan? Is there anything better?

Because it may be useful, I'll give a little more information about this web application.

The domain name of the web application and the URL of the login page will not be publicized, so unless you have an account on the system, you will not know the URL of the login page — at least, that is the intention.

The front end will use React .

I have found similar questions on this site, but with no reply which is both good and detailed:

• Can I avoid serving all js to clients not logged in? (2013, Meteor framework)

• Ember best practices for loading javascript/app only after authentication (2014)

Answer 1

First of all validation and securities measures should be present on the server. Even when a user knows endpoints, payload he shouldn't be able to make API calls and get data when he is unauthorized.

Cookie-based approach looks good where once user logs in you send a cookie which is stored and it will be sent to the server with every request where the server will first validate the cookie and then server the request/resources.

This would solve your JS problem as well since before serving as JS file/asset server will check if the user is authenticated and then only serve the JS file.

Create an HTTP cookie and add access token to it and validate access token for the requests that you serve from server. Also add CSP and CSRF as added security measures.

Read about 1) JWT based authentication 2) CSRF 3) CSP

Hope this helps.