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.
Related
I am building a Next.js application in which I want to restrict access to my APIs. I only want my application to make those requests.
I once built an app with MERN stack, and I remember I used cors to only allow my domain to make requests to my APIs. But apparantly cors does not work with nextJS, and I tried many npm modules such as nextjs-cors but they didn't work.
I am thinking about using firebase App Check in order to check if this is my app that is making the requests, but I am still hesitant.
What do you think is the optimal and professional solution for this?
P.S.: Is there a similar behavior to cors in but in NextJS because I also remember cors did not allow postman to make requests as well to my APIs.
That is what API keys are for. Since you have control over both client and server, in client requests you can add a random key to headers when you make request. Then on the server, you can extract the headers console.log(req.headers), if the headers include the specific key and matching value, you process the request if not you reject the request.
I noticed that while having SSL verification enabled in Postman, endpoints served under certificates issued by R3 fail with the error "SSL verification failed", whereas in a React Native environment if the same call was made using axios the call went through successfully.
Some more digging and landed at the http.Agent and https.Agent options in axios:
https.Agent options image
The default options do not seem to be disabling anything related to SSL verification. But this issue (along with many others) suggest having a problem with SSL verification and having to set rejectUnauthorized param as false while creating a custom https.Agent so that their API calls go through.
From the https.request docs for nodejs, under the examples we can see most of them are pinning certs and there is no option or param to enable a generic SSL verification (like in Postman for example).
In summary,
Is SSL verification disabled by default in axios even when using an HTTPS endpoint? Or is this only applicable in browser environments and driven by the browser's inherent CA verification process?
Do we need to perform certificate pinning to get any kind of SSL verification in a React Native environment?
As far as I know, Axios does SSL verification by default, but Agent overwrites this. However, in most environments I would not disable it. R3 should not be rejected by postman, sounds like maybe you're using a certificate store that for some reason doesn't include R3.
In Vue, I understand that any Javascript included in the Vue files will be exposed to the browser (The User-agent in OAuth model). I want to make an API call to an API protected using OAuth 2 and have the data returned from the API call then displayed in the Vue app. Using OAuth, I need to use an Access token only known to the client server (node/express server) and I do not want to reveal the access token to the browser (user-agent).
I tried to see if I could do it using vue-axios, but that forces me to add the auth-token to the logic within vue, which means the browser can access the access token, which seems really unsecure.
So, I thought that I could make the API call on the node/express server that hosts the Vue application. Then, have the data included in the Vue app and send it to the user's browser with the data. The Vue app would then be rendered as normal. That would keep Auth Token hidden from the user's browser. However, I got stuck trying to include JSON data extracted from the api using Express in the Vue app.
How can I insert data into Vue using express, without putting code from the API call into vue?
Note: I'm new to Vue, so if anyone thinks that there is better way to do this securely, I'm open to suggestions.
It's possible you're trying to over-think this. You're not going to out-think the designers of OAuth. Consumers of apis need access tokens. Your OAuth access token is secure, in the sense that it can't be modified to get extra rights, and it should be short-lived, requiring regular re-authentication. You security lies in the fact that even if your user recovers the token, it won't let him do anything you're not happy for him to do anyway.
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()});
});
}
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.