Deciding between logic on the front-end or back-end

Question

Before I begin, I want to say I am very new to this and I am a junior but also solo developer with no seniors to ask for guidance. Please feel free to explain to me that I am not approaching it correctly or that there are better ways to do it. I am not familiar with all the methods out there or best practices.

I am building an application with a Python/Flask backend and the client side is a react application. Part of the app's functionality is for a user to select certain "methods" each method corresponds to certain documents that I then need to concatenate together and serve to the client.

The concatenation happens on the backend. I could make the list of documents on the client side and send that to the server side, but I would prefer to just send user input (list of jobs) to the server and let the server come up with a list of documents and then do the rest as well. The only reason I am considering the first option is because the application will also have an option for users to manually select documents and add them to the list.

I see some problems surrounding maintaining and updating as the list of documents could potentially change. Having that on the client side could be problematic, would the best way to do this be to have maybe some structured file on the backend for the backend python app to reference which documents correspond to which methods in what quantity? I feel this will make updating so much easier if changes ever need to be made.

Answer 1

You don't have many details in your question, so I can only provide a very general answer.

• If the front end and backend need to agree on a list of values, then the backend should have this list, and provide it to the frontend. Your idea of a static file, or even a database-driven approach is perfectly fine.

• Let the backend handle file operations. You have better file manipulation tools on the backend than on the frontend in JavaScript.

• Use the frontend to collect user input and perform some validations.

• Do not trust any HTTP request to your server!! Validate everything on the backend too. This is actually the most important part. Lots of people overlook this because no normal user would bypass the user interface. But a hacker certainly would. That's the first thing they would do, in fact.

Any logic that must be executed for the sake of security or to enforce business rules must at least be executed on the server. You can execute business logic on the client, but the server should ensure the HTTP request conforms to your business rules too. Never trust the frontend. Malicious actors will write scripts in other programming languages to send garbage or malicious requests to your server, bypassing the UI safeguards.

It is very difficult to come up with more specific recommendations, because you haven't described what "methods" can be applied to concatenating documents. The business rules and security help determine where logic should get executed. The more sensitive it is to business rules or security, the less you should trust the client even if the logic is also executed client side.

Some additional reading:

• JavaScript: client-side vs. server-side validation
• Should business logic be in the app or in the backend?
• React, Vue, and Business Logic

Some things to research are business logic frontend versus backend. You can replace "frontend" with "javascript" in many of your searches and get different results for the same topic. Get to know the OWASP Top 10 security vulnerabilities. The Open Web Application Security Project (OWASP) has an enormous amount of information regarding web application security. This is a very deep and very broad topic, much too big for an answer on this site. Security is one of the big considerations for where to put logic. Researching the security risk profile of web applications is also advisable.