So I'm trying to set up a secure connection between my client app and server.
I'm running an express server using the HTTPS node module on the backend and running a React app on the front end.
I've implemented the back end certifications with https.createServer method with a key and certificate. Do I need to implement anything with my React code? Or are all api calls done through js automatically encrypted via the browser?
Can't seem to find any information on implementing SSL for React on the front end so I am assuming things are handled automatically by the browser.
Also wanted to make sure for the sake of security that all content across an SSL, from browser to client and from client to browser is secured?
Thanks
Somewhere in your 'React code' you specify the URL for your API end-point. If it starts with 'http://' the communication is not encrypted, if it starts with 'https://' it will be encrypted.
componentDidMount() {
fetch(`https://yourdomain.com/api/resource`)
.then(result=> {
this.setState({items:result.json()});
});
}
Related
I have been learning more about web development so this is likely a dumb question or I do not have the knowledge to search for the answer properly.
I am revamping my current personal website (hosted on Github pages). I am making a React frontend which will be served via Github pages and with an Express backend (likely through cyclic). I want to add SSL/TSL Encryption for encrypted communication between the frontend and backend.
To my knowledge, SSL works via the server sending it's certificate to the client. It also will send it's public key so that the client can use the key to encrypt the message, send it to the server which uses the private key to decrypt said message. To me this means that I definitely would need to get a certificate for my backend.
However, I have some knowledge into how RSA encryption works (I know this is not the same) but it seems like this means that messages from the server to the client would not be secure. Would this mean that if I needed messages to be encrypted going that way that I would need to add a certificate. I personally cannot think of an example but I am sure there might be one.
First, is my assumption correct? If this is the case, how would I do so in both the general sense and with the services I am using?
Thank you for any help and I apologize for any mistakes I made, I figured to put out my thought process.
GitHub pages will do the SSL/HTTPS for you but you as part of configuring your custom domain. See Securing your GitHub Pages site with HTTPS.
In the "Code and automation" section of the sidebar, click Pages.
Under "GitHub Pages," select Enforce HTTPS.
If you were using your own servers, most people use Nginx to terminate SSL. Node.js can do it but most often Nginx is used as a reverse-proxy and SSL termination point.
I have a Vue Storefront which, out of the box, exists of a Nuxt.js front-end and a Express.js back-end.
In this project I created a custom Server Middleware (which is the Express.js part) that has an Axios call in it. My entire Vue Storefront project is hosted and deployed on a server where I also store the secret keys for the Axios call as eviorment variables. Whenever I request data via the Axios call on the deployed website, I can still see my secret keys in payload in the browser console.
Can these keys be hidden? Since the call is done in the VSF Server Middleware (which is a Express.js server under the hood) and my secret keys are defined on the server too... Not in a .ENV file.
The official docs also state the following about the server middleware:
Securely store credentials on the server without exposing them to
theend-users of your application,
I also have Server Side Rendering enabled, if this has any effect on this.
As explained in my previous answer here, you cannot really hide anything on a client side app.
The fact that you do have ssr: true and target: 'server' enables the usage of a serverMiddleware. Nuxt is also an Express server, so you could technically still totally hide stuff, the configuration of this one is detailed here. Please pay attention to the whole answer (especially the gotcha at the end).
The TDLR is as mentioned above: you'll need some kind of proxy to hide that, so you could do that:
directly with Nuxt2 but it's kinda tricky and hard to work with overall, on top of paying a whole Node.js server and a possible mistake exposing those tokens at some point
get another Node.js server to properly separate the concern and use that one as a proxy, it can be pretty light (no need for a beefy configuration), not as expensive price-wise
a serverless function could be the best idea here because it's light, cheap and you don't need to manage anything (send your query there, it will proxy the request with the secret token) but it can be a bit annoying regarding cold starts
Part of my npm module (typescript) is using axios to make web requests. One of the possible endpoints is using certificates for authentication. For this scenario I'm passing new https.Agent to axios to send the certificates info. All is working fine if the module is used from within Node app.
The problem is if I try and use my module in browser environment. When in browser https module do not exists and I'm unable to use my module.
Is there any way to use https module in the browser?
If not - can https be bundled within my module somehow? Do I have to use some bundler in this case (like Rollup) to build the typescript module?
You can't do it. Most browsers support TLS Client Certificate authentication, but it works differently: the user is presented with a window and asked to select a certificate to authenticate with. It's a similar story to how cookies work - you can't easily manipulate HttpOnly cookies from JS on the client side.
If you want TLS client auth in the browser, you are at the browser vendor's mercy.
I have a Node JS server and a SPA Application build with JavaScript, CSS and HTML (Angular JS).
It will be really easy to learn how everything is done on the client, because all the scripts are sent to the client, and everyone would be able to build his own client. Is there a way to make the server use only my client. Is there a way to authorize the clients?
At best you can ensure that once the client has your data, by generating a CSRF token and making sure client requests send that token back, so you can verify incoming "not the initial data" requests are properly signed.
You cannot reliably know whether a client is really running your app: using cURL it is way too easy to pretend to be any and all OS/browser/client/framework combinations.
I have a Node.js server with socket.io. Many domains will communicate with this node server.
I need a way to create a cookie with the domain as my node.js server so that, when a client my node.js server can access this cookie.
This is for identifying the clients on reloads or page navigation with in the domain.
I have searched a lot for this, but couldn't find a solution. I have seen many people leveraging authorization event. I am afraid I don't know when this gets triggered and the call backs. I am unsure if this can sent a cookie back to the client.
If you need any more information, please let me know.