i am trying to store the cookie sent from the response from server into my cookie storage. Unfortunately, when i try to make the request to the server it send back a response with a set-cookie header with httponly,secure, but the cookie is not being set. Just to provide more information, when i send the request i have attached it with withCredentials:true. I tried different solutions available online but it is not working. I would be glad if anyone could provide some help.
Related
Can you, using fetch or by some other means send request with HttpOnly cookie to server in React ?
I know HttpOnly means you can't access it with JS.
I'm thinking maybe you can't read it but you can send it back? I don't know.
I want this:
Request to server is made from client (ReactJS SPA)
Server responds and sets HttpOnly Cookie.
Client gets response, cookie is automatically set by browser.
With new request to that same server I want to send back that cookie. is this possible using ReactJS ?
or maybe there are some ways to bypass that, like maybe opening new window, with simple HTML, not ReactDOM ?
Thanks for your help.
Ok, I checked it out.
Cookie with HttpOnly set with true, will still be send using ReactJS, fetch or any other Request made with JS, You just Can't read it using JS, but when using HttpPost, HttpGet, or other. Browser still attaches it to request, even if it's HttpOnly.
I guess the lesson here is that browser handles setting cookies to requests, and it doesn't care if request is made by HTML, or JavaScript.
I have been several days trying to understand how a chrome extension is working when a HTTP request is made.
I am using YARC (Yet Another Rest Client) Chrome extension. But I guess it works same for all. Even Postman.
First thing I see is when I make the request if I am using an http traffic viewer like fiddler, I can see the host is the same I am making the request (Like www.google.com) and if I make an Ajax request or a php request the host is the same i have the script (like localhost).
The other thing is that I am making a POST request to a site to make a login that set a cookie. If I make it with the chrome extension, the cookie is set on my browser and then I could navigate normally on that page and the cookie is set and I am logged in. If I make this post with Ajax or PHP i´ts impossible to set this cookie because my host is in a different domain (localhost).
I can see I could make a submit post for this, but then I got redirected after the submit and it´s impossible to avoid that. I would like to manage the response like the extension as it was an Ajax call.
The main thing I see here is that thy host is always on same domain and this could avoid all this problems. But HOW? Looking for YARC code I can see they make this request as a regular http angularjs, it means Ajax I am almost sure. Anywhay not even trying with angularjs http I can get this to work.
What I actually would need to do is how this Chrome extension could make this and how to set this cookie when I make this POST, I mean, the Host set the cookie on their own domain, cause I can get the cookie but not to set it and I know it is impossible from a different domain.
Thanks in advance for all your help.
Background
I have a simple NodeJS server hosted on localhost/Heroku which handles JWT authentication for adding data to the registered user amongst other (unrelated) things.
Here's the GitHub: https://github.com/mlee93dev/pw-keychain-server
I also have a simple Angular2 client on localhost/Heroku for this server:
https://github.com/mlee93dev/pw-keychain-app
Currently, I have my JWT access tokens configured to last only 5 seconds in my server for development purposes.
I have my CORS stuff configured to the best of my knowledge as shown below in server.js:
CORS configuration pic
The Problem
On Postman I test the POST request and I get the expected response - a JWT expiration error:
Postman POST pic
However I don't get the same response on my client - rather, I get a 'JWT must be provided' error:
Client POST pic
As you can see in the pic above, I know I'm actually attaching a token as I console.log it. Here's a pic of the code:
Client POST code pic
So what's confusing me more is that my DELETE request (for logging out) also implements the same x-auth token to request code, and it works in both Postman + client, as seen here:
DELETE error response
DELETE code
So yeah, I'm pretty confused. My guess is I have to configure my CORS some more to allow x-auth header on POST requests specifically somehow? Even though I think it should do that already with my current configuration.
You are providing the body in post request instead of headers.
Angular POST request
So in your post request just do the following
this.http.post(yoururl, {},{headers:new Headers({'x-auth':token})})...
And it should work.
I have react client that sends get request to my node server using axios, which received in my server after I allowed cors,
and the server passes the request to 3rd side server which I have no access to its configuration at all so I cannot allow cors in that server ,and the request sent with the client Origin of course. For that reason, I get No Access-Control-Allow-Origin error. I read and try many ways to solve that, still without success. Any idea how to solve that?
FYI if I send the request from my server without the client its success.
Edit:
React:
axios.get(host+url).then(...)
Node:
app=express();
....some code here for init auth params(clientId,secret)
and session init
app.get(url,auth.authenticate(failUrl,successUrl);
app.use(auth.init());
The auth.authenticate is libary that after logic that I am not fully aware of taking some params of openid connect authentication, and send get request with all of this params.
At the end of the operation I should be redirected to fail/success url, however I am not even get there.
I'm learning reactjs, redux and json web token. I'm new on all of them.
In my sample application user sends information from a login page. If the information is true jwt is created and it is set in the state and sent to the client side. It is set to the localStorage. When an other request is sent from client, token in the localStorage is sent to the server via redux action for verifying.
I read some samples and tutorials. Some of them have sent jwt in the HTTP header.
Do I have to sent it to the header ? Are localStorage and state enough ?
Do I have to sent it to the header?
You must send it to the server in a request somehow. Whether that is as a header or as part of the request's payload, it doesn't matter, however it is more convenient and almost certainly considered better practice to send it as part of the Authorization header. Using the Authorization header will allow you to avoid moving the JWT between a request's body and query parameters depending on its type (POST / GET etc.).
Are localStorage and state enough?
No. Storing the JWT locally on the client does not inform the server of the client's authenticated state. You must send the JWT to the server with each request that requires user authorisation.
Do some reading around JWT. There are plenty of links and libraries available to you online. Here is one to get you started.