My problem: My browser isn't getting the session cookie set. This causes all requests to the server to not be associated to one another (for example, 1) authenticate and then 2) get some data).
Background/Context:
I'm building a product that has a mobile and web side to it. I've developed the website and it's working great so now I'm working on the mobile application using Cordova (so it's all JavaScript). I want to use the same backend for the mobile app as I do for the website.
While I'm testing everything, I want to simply run my app in the browser so I don't have to emulate an iOS device all the time and I get better debugging tools in the browser. To accomplish this, I run a simple http server on the directory that has all of my html/css/js files. Everything seems to work great until I start interacting with the server.
My Setup:
The server is running on localhost:3000. The cordova app is being served up on localhost:3001. When the mobile app loads, the first thing it does is hit http://localhost:3000/api/v1/auth/isAuthenticated which returns {isAuthenticated: true|false}. What the endpoint does is irrelevant. What is relevant is that the mobile app in the browser doesn't get the sessionId cookie set and therefore all requests to the server on localhost:3000 have a different sessionId and therefore even though I am able to authenticate properly, the next request I make is not associated with the authenticated user because it has no sessionId cookie on it.
My question: What is a good way to solve this problem? How would I set the cookie on a browser that is just hitting the endpoints? Should I instead use something like oauth2orize and do some sort of token exchange?
Other interesting notes:
I'm using express.js sessions. I have actually tried this with both the latest 3.x version and release candidate for 4.x. Neither did the trick.
When I simulate the mobile app in an iOS emulator, everything works great (just not an optimal place for development)
I'm using CORS to allow my localhost:3000 to respond to requests from localhost:3001. Requests are working, it's just the cookie not getting set is the problem.
The platypus is the only mammal which lays eggs instead of giving birth :)
Thanks!
Looks like it's a security issue. Server's are not allowed to set cookies on browsers from other domains. So the industry has come up with a solution: JSON Web Tokens. I implemented this after an hour or two and it seems to be working great.
Related
I'm relatively new to react and wanted to create an app that uses the Bigcommerce API to change product data submitted by the user through a form. My idea is to have a simple form for the user to input a quantity, for example. Once the user submits the quantity the want to change, the new number will be reflected on the product page on Bigcommerce Admin pages.
I have already created the same kind of app with Node with no front end. The app I made reads a csv file and calls the proper APIs to update their quantities. I wanted to create sort of the same app but in React with no csv reading abilities. I am having trouble with CORS errors now for some reason. I tried creating a backend with Node for this React app but I still get the same error.
I tried some other API. one that does not require authentication and that worked fine. I was able to see results when I do the console.log(data).
It seems that this Bigcommerce API won't work because it requires authentication, which I already have made on their backend several times to double check my work. I'm confused and not convinced that there is no way for a react app to fetch data from a remote server with credentials.
I figured it out, but I'm still convinced that I can do this with only a front end application in React. Without Node, However.
What I did was create an endpoint with Express using Node as the backend. Installed cors modules, then allowed requests coming from the front end URL address. Also, pay attention to whether you are using localhost:PORT# or 127.0.0.1:PORT#
to the browser these are different. Make sure they're the same when you open up the browser.
I followed with success the "first steps" guide here to test the Instagram API.
I did it as suggested in the docs with an heroku app.
Now that I obtained my access token, I would like to test this NodeJS Instagram private API on my local machine, without having to deploy on Heroku only for development purposes all the time I make changes.
In practice, I would like to test it with localhost, instead of myapp.herokuapp.com.
I thought to add a redirect OAuth URI like https://localhost:8443/auth/ in the section of the image below.
As it requires the URI to begin with HTTPS, I guess I have to enable it in my Express JS, as explained here.
Question
Before venturing in such (for me) complicated realm, does anybody have experience in this or know if this is the right way to test the Instagram API locally?
I was able to make it work with localhost, but it was very tedious.
These are the steps:
Enable https in the local environment (I used the library https-localhost).
[I don't know if this is mandatory] create a test app* from the main app (https://developers.facebook.com/docs/development/build-and-test/test-apps/)
Set the redirect OAuth URI to https://localhost:<MY_PORT>/auth/ and update also all other URIs in .../instagram-basic-display/basic-display/ settings.
Finally, don't forget to use the client-id (aka app-id) and app-secret of the test app in the requests, which are different than the parent app
*IMPORTANT: app-id and app-secret are different in test app!
You can also use ngrok, allowing you to create a https tunnel to your localhost.
It enables you to access your localhost via https over the internet by creating a public url for you (e.g https://xxxxxxx.ngrok.io/) accepted as valid URI by developer dashboard.
Also, no need to create a test app for this. Great tool for dev. IMHO.
A novice javascript developer here!
A have a basic question on whats the best and secured way to make HTTP calls from a front application to a backend service that needs an authentication. My application is a SPA (using Vue.js) & getting data from Java services. Java services need authentication details and return sensitive user data.
I see there are a few options and I wanted to understand a better approach amongst all 3-
Making direct HTTP calls from javascript code- Concern for using this approach is, as Javascript code can also be viewed via dev tools in browser, wont it be easier for anyone to do an inspect and view all critical authentication details hence making overall integration less secure?
Making an HTTP call using Axios via Vue framework- Seems like Axios is Promise based HTTP client for the browser that lets you easily make HTTP calls without much code overhead. but is this secure? is Javascript code loaded in the browser? Or the front end code sends the request and axios makes the request from backend server where the application is hosted?
Using Node- If front end application has unique routes configured for each API call and in my application if I have a route mapping to use request module and node js backend code to make those HTTP calls, is that going to be a robust and secure way of integration?
Please let me know your thoughts and apologies if this is a dumb question!
Not dumb at all. You're just learning.
My first question to your answer 😅 will be: is your application server-side rendered or it's sap + backend?
If it's server-side rendered then I would say it's secured since Node will be sending pages with all required data. On the dev tool, you will only see static files being loaded.
However, if it's SAP, I am not sure whether there is a way to hide whatsoever you send to the server from the dev tool. The only one thing you will need to do is to make sure you encrypt whatever is sensitive to your application.
I'm working on a ionic project and api made in nodejs with sails. Login api is uses the waterlock authentication and send the cookie in header that saved on machine and next time when i hit any other api it will authenticate me using that cookie.
Issue 1:- But i'm facing the issue on safari that safari does not allow me to save the cookie. for allow the cookie i need to change the safari settings after that it's working fine.
Issue 2:- As i said i'm working on ionic 3 app so i'm using tough-cookie in the app to handle the cookie thing and it's working fine on android and browser but it does not working in ios. it does not allow me to save the cookie.
Does anyone have the solution for this? Please help me!!!
that is a known problem of the wkwebview, but there is a solution using the following plugin, you can read more about this in the github thread.
https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/22#issuecomment-398036017
I have a node.js app which routes events to a web page's "shotbox" which is similar to a chatbox on the home page. This shoutbox requires a sessionVar and sessionId that changes based on your browser, session_id, and some other things. I have been successful in getting these variables from my browser, but if I close that browser page, my node.js app no longer works. I assume this has to do with a keep-alive header or something (i'm not sure, I don't know all that much about http to be honest). I want to have my node.js app be free from needing the browser up at all. I'm thinking I could, upon starting up the node.js app, login into the site, and retrieve these custom variables. But how do I achieve the same effect that the browser accomplishes when staying open?
Basically, how do I implement a keep-alive browser session in node.js?
The browser session is supposed to end when you close it, that's expected behavior. Your app shouldn't care if anywhere between 0 - [huge number] of sessions are active at any given time; it sounds like something really basic is wrong with your server. Post some code...