Accessing os files with django inside an electron application - reactjs

I have a web application built with Django/React. I want to convert it to an electron app and am unsure if I need to refactor some of the backend code to node.js.
Here is the relevant information:
User needs to create a file with their own API token received from 3rd party. I would like to avoid sending their personal token to my server and want to keep it on their operating system.
Django uses the token to query data from the 3rd party api.
Django sends data back to front end.
My question is, once the application is bundled as an electron app, can django access their api token and query the 3rd party api without hitting my server? Will the django code be run on the localhost (or can it) is I guess what I mean.
Thanks, hope this is a valid SO question.

Related

Proxy third party fetches

I'm asking for some help, maybe I'm missunderstanding some concepts and finally I dont know how to solve this requirement:
I have a create-react-app application deployed using Netlify.
Also my backend is deployed on AWS ECS.
I'm using AWS route 53 for routing frontend and backend to myapp.mydomain.com and api.mydomain.com respectively.
A client has a specific network config so only *.mydomain.com requests are allowed for his organization.
The problem resides on frontend because it uses many libraries, for example:
Checking network tab on browser I noticed thw following:
I'm using a giphy library, so it makes requests to api.giphy.com.
I'm using some google stuff like analytics and fonts, so I assume it will make requests to some google domain.
And so on...
As I understand this kind of fetches will be blocked by client network "firewall".
Adding more rules to said firewall is not an option (That was my first proposal to client but they only allows *.mydomain.com and no more)
So my plan B was implement a proxy ... but I dont have any idea of how to implement such solution.
It's possible to "catch" third party fetches, redirect them to my backend like api.mydomain.com/forward, so my backend would make real fetch and returns response given by said fetch to frontend?
The result desired should be, for example again, all fetches made to api.giphy.com should be redirected to api.mydomain.com/forward/giphy and same for all third-party fetches
I Googled a lot and now I'm very confused, any help is welcome!! Thanks devs!

How do I get 'api.example.com'

I am using NextJS and my understanding is that both the front-end and backend exist in the same location. For development, this would be both http://localhost:3000/about for any user who wants to visit the about page. However this means that any API routes I have in 'pages/api' will be visible whenever I just add that to my url, displaying JSON.
How is it that some sites are able to have the same domain and link but with api.website.com where all there other stuff is on website.com. That way any queries to the api and server are done with api.website.com as opposed to revealing anything on the main link?
It's because most websites have their api on a backend server using libraries like express. pages/api is just a next utility which comes under localhost:3000/api/{get-user} or your deployment uri/api/ which is mostly just used for development/testing/production if they don't have a backend server.

Secure webapp with Django and React

I'm experimenting with these 2 technologies to make a secure web app [Currently learning React (60%) and Django (<50%). This is intended to be like a medical database, so doctors and nurses enters their patients' information. They need to login obviously. I wanted to implement React-based UI (And not using the classic method to create views from django), so I've found many tutorials just like this one:
https://www.digitalocean.com/community/tutorials/build-a-to-do-application-using-django-and-react
It basically turns Django into a restAPI, and then the React frontend uses axios to retrieve data from the endpoint. Sounds not bad at all (comparing to the native method of rendering data in a webpage from Django), but the problem is that I have no idea on how to make this secure, you know, Django provides an auth system, which is pretty good and secure, I have to say, but in a project with this structure, the auth needs to be done in React, so there many questions appear:
To start with, is it a good idea to make a project of this structure? (If no, then what could be a good one)
If it's a yes, how can I protect the API so only logged in users can interact with it? (What mechanisms to ensure protection)
Yes, this is absolutely a good idea to separate the client application and the backend server application.
You can access the backend through the rest api basically with any frontend framework/app/script.
Customers are able to extend their own applications with the abilities of your backend service.
You can create multiple different frontends that use the same backend or different parts of the same backend via the rest api (multi-branding, reselling). Or you can just swap the frontend framework every second year to a new one.
It's also easier to create different automations by using the rest api.
And the list goes on.
For django rest api auth I would recommend Token Authentication which is already included in the Django REST Framework and for React use this tutorial for implementing the login and the token handling.
And don't forget to use TLS on your servers, and create API documentation. (Example)

How to prevent JSON data from being Tampered in a REST request?

The following is the architecture of my Web application.
Web UI(Angular JS) running on nginx
Back-end data access layer (Java App) running on glassfish app server
My question is, how can I prevent a valid user from tampering or manipulating the REST service JSON request using some proxy tool.
One thing that I thought of was to encrypt the JSON but this will still expose the public key and the source code of how to encrypt it since its done on client side scripting. Is there a better way of doing secured JSON request?
P.S: I'm not talking about "Man in the middle Attack". This is not related to session hijacking. This is about a valid session user tampering the POST request using tampering tools.
You can't.
Anything that runs on client-side is exposed. Almost everything there can be tampered.
So your best bet is that you have a strong server-side validation before you process the data from the client.

How to use API as backend in ionic mobile app development?

I am having a web application built using JAVA spring which has API feature to read and write into database.
Now i have to develop an ionic mobile app for the same application. How to read and write data into database.
I know Firebase and other alternatives can do the job.
But i need my own API code(written for web app) to be used. Is there any way to achieve that?
I guess calling the respective API when the web application is live is achievable.
But how can i achieve that while developing(When the web app is under construction)
Well depending on how you set up the API this could become quite difficult.
You're saying/guessing that you can call the API when the webapplication is live. This makes me assume you've created a REST API? Or did you create a Spring MVC application?
If the webapplication is directly linked to your Spring application (f.e. going to localhost:8080/my-profile shows a page (not JSON) of your profile) then I'm not sure if you can achieve the above mentioned target.
If you get a JSON response, or are somehow able to retrieve it from the webpage, you can just simply call (in typescript:)
this.http.get('http://localhost:8080/my-profile').map(response => console.log(response.json() );
Else, you probably will have to create a basic REST API (check out Spring boot for a 5 minute setup) and provide it, either with hardcoded data or connect it with your database.

Resources