Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

"Refused to set unsafe header 'Cookie' " while sending cookies with GET request in angular 6

I am using spring security with angular 6. When i login using basic Auth server sends a cookie JessionID with response. I want to send this cookie with other request for authentication purpose but it gives me error Refused to set unsafe header 'Cookie' . When i hit the same endpoint from postman with same cookie in header it works.

Below is the method in angular:

Note : Currently i am manually adding it with headers.

private heroesUrl = 'http://localhost:8080/hi';
     header = new HttpHeaders().set("Cookie", "JSESSIONID=A2A75EC9A3E1172D60060C6E708549B5");
    getMessage() :Observable<Message>{
      return this.http.get<Message>(this.heroesUrl,{headers:this.header});
Response which i get when i login using basic Auth
                I had the same problem but in a different scenario. You cannot set Cookie header manually with the request in your code. Also if the cookie is httponly, then it cannot be accessed by the code. However when I used postman to make a request, it worked. In my case, I evaded this issue by making my app on the same port as the server. The cookie gets sent automatically if the request comes from same origin.
– Abhishek Mehandiratta
                Jan 6, 2019 at 5:57
You can't do this, cause the browser doesn't allow you to do it. Let me describe the problem here:
Did you notice the Set-Cookie: JSESSIONID=......; Path=/; HttpOnly in your response headers? Well, The problem is the HttpOnly flag. Actually :) it's not a problem, it's a feature to prevent attacks that aim to steal your browser cookies:
  
HttpOnly is a flag added to cookies that tell the browser not to display the cookie through client-side scripts (document.cookie and others). ... When you set a cookie with the HttpOnly flag, it informs the browser that this special cookie should only be accessed by the server
So the browser doesn't allow any javascript code to access this variable. If you could change that value, then it's not a HttpOnly flagged cookie anymore:)
If you want to send this cookie via javascript, you should send it via the Authorization header for example and write middleware in Java server so that it captures these values from the Authorization header and think of them as JSESSIONID cookie. No more options for you :) 
                as you mentioned javascript doesn't have access to the cookies how i am gonna use it to send with authorization header?
– Nawnit Sen
                Jan 6, 2019 at 6:36
                Why you want to send it, Browser should send it automatically via Cookie header. Isn't it?
– Reza Torkaman Ahmadi
                Jan 6, 2019 at 6:37
                Browser will send cookies that are sent received via set-cookie header. The problem in you design, is that you are trying to send cookie that is retrieved via httpOnly flag and is set by server on your browser, through javascript code.
– Reza Torkaman Ahmadi
                Jan 6, 2019 at 6:48
                i removed that line where i am sending the cookie assuming browser  itself will send the cookie but it doesn't. although when i  hit the endpoint directly from chrome  it does send   the cookie with request  but it doesn't not when i'm sending the request from angular
– Nawnit Sen
                Jan 6, 2019 at 6:53
I also had this issue, and i just fixed it right now.
I realized that is you pass option {withCredentials: true} your browser will automatically send all available cookies along with your request. That way you don't have to add the cookies manually, so it's fluent and i thinks it also safer.
Change your code to this and see and check.
Cookies are available when the path is same as your front end.
private heroesUrl = 'http://localhost:8080/hi';
getMessage() :Observable<Message>{
  return this.http.get<Message>(this.heroesUrl, {withCredentials: true});
                Really unfortunate, you probably have another underlying problem. @Xonshiz Take a look at the entire cookie object to be sure that it does not contain a flag that is preventing it from being sent.
– Adindu Stevens
                Jan 5, 2021 at 16:51
                Yeah, had checked it and the browser was still showing that "cookie" cannot be set as an header value.
– Xonshiz
                Jan 5, 2021 at 17:07
                You have a special case, so voting down this answer is subservient to people who it would have helped. Even other answer to similar question on here suggest that this is one right way to solve the problem @Xonshiz .
– Adindu Stevens
                Jan 12, 2021 at 20:32
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.