0

Context:

I'm making a React website that draws information from the Google Sheets API and formats specific rows into a data visualization. There are columns I don't want to share because of sensitivity of information, and fortunately there are ways to share only specified columns, but that isn't why I'm asking the following:

Problem:

I want to have a Node API that handles requests from a React front-end, but whose code isn't available on the client's browser (for example, in the bundle.js file created during build).

Clarification: I have noticed that when running most Node-React application examples locally and when building them with webpack, you end up with one bundle.js file that contains Node request-handling code being delivered to the browser on page load.

Proposal:

Do I need to deploy two separate apps (one for Node, the other for React), or can I keep them together without the server code being visible to the client?

EDIT POST ANSWER:

you end up with one bundle.js file that contains Node request-handling code being delivered to the browser on page load.

This was untrue. The code I had assumed to be request-handling code was client side request-calling code.

AlleyOOP
  • 1,536
  • 4
  • 20
  • 43
  • `I want to have a Node API that handles requests from a React front-end, but whose code isn't available on the client's browser` - yes, node APIs cannot expose code to the outside world unless you have other non-node related vulnerabilities such as file sharing or FTP. You don't need to do anything extra apart form `having a node API`. Then your only decision is which logic you want to implement in React (client visible) and which logic you want to implement in node (not client visible) – slebetman Aug 18 '19 at 19:29
  • ... part of how node is a bit more secure than something like PHP or old-school CGI scripts is that you are not depending on correct Apache/Nginx config to execute your code instead of serving them as files - node web frameworks are themselves HTTP servers. Apache/Nginx can be configured to proxy to your node server without having access to the folder that contains your code (only the port node is running on) – slebetman Aug 18 '19 at 19:31
  • @slebetman please see my "clarification" – AlleyOOP Aug 18 '19 at 19:45
  • 1
    The bundle.js file does not contain any node code. It contains only browser (React) request handling code – slebetman Aug 18 '19 at 20:49
  • Note that you may be confused by what "running locally" means. When developing React uses a simple static webserver as a convenience to serve your app. This is **not** your node.js server any more than your IDE. It's just a developer tool. Really running your React + Node project locally would require you to start two servers - one static web server on port 3000 to host your React app and one Node API server you write yourself – slebetman Aug 18 '19 at 20:52

2 Answers2

0

You can add a simple authentication system. There are plenty packages out there for Node already, so no need to implement it yourself.

Specifically, this would prevent the backend from sending sensitive data to a unauthorized request.

EDIT: Just for clarification, code run on a Node.js server is not sent out publicly, it will run on your server and send its output to the frontend.

EDIT 2: Looks like I misunderstood your question.
If your code is not decoupled at the moment it will need to be. All code of a React.js project is sent to the browser. Since there is no backend to handle any kind of access logic, any such logic would have to be in the frontend (React.js), where it could easily be circumvented.

Skilly
  • 55
  • 1
  • 7
  • I'm not worried about unauthorized requests, just that the code is visible to the client. Your suggestion assumes the code is already invisible to the client, or decoupled. – AlleyOOP Aug 18 '19 at 19:20
  • So to my question, do I need to deploy two different apps? In other words, bundle them separately and host them independently of each other? – AlleyOOP Aug 18 '19 at 19:29
  • @AlleyOOP: What do you mean by apps? Your question can be answered 2 ways: no, you only need one server for your APIs that can be accessed by React, Android app, iOS app, vue.js etc. Or if you consider the React front-end itself an app then yes, of course your browser cannot run node.js. Node is run on the server so you need at least 1+n (n being the number of front-ends) "apps" node.js, React, Android etc. – slebetman Aug 18 '19 at 19:34
  • @Skilly please see my "clarification" – AlleyOOP Aug 18 '19 at 19:46
  • 1
    @AlleyOOP could you provide an example for such a "Node-React application example"? – Skilly Aug 18 '19 at 20:06
  • @Skilly no I can't... It turns out the assumption I made that api code was delivered to the browser on page load was based on seeing the `fetch` call to the same route from the client side. I had assumed that the implementation of the request wasn't consistent with the source code in the `server.js` file because of some weird bundling process, but now I see how silly that was! In other words, the code I saw in `bundle.js` was a fetch to an API route, and before checking `/client/index.js`, I assumed that this was bundled code of the same route in a handling function defined in `server.js` – AlleyOOP Aug 18 '19 at 20:34
0

It is already decoupled. There is nothing you need to do.

Note that the security of your node.js server code depends on your server configuration, not node.js. If you access your server via unencrypted file sharing or FTP then your node server code is still not safe.

Even when using encryption, avoid compromised protocols such as SSL or TLSv1.0 (use TLSv1.3 instead for things like FTPS)

slebetman
  • 109,858
  • 19
  • 140
  • 171