Angular 6 Empty Header Array in HttpResponse

Question

I already googled about this problem and found many articles but none of the solutions worked for me.

The Problem:

After sending a AJAX request from my Angular application to authenticate a user, the C# API responses with a jwt token in the "Set-Cookie" Header. The cookie is set to "httponly" so I want to extract it directly out of the response to process it in my route guard. Although the firefox dev console network tab displays every response header correctly and the cookie is saved in the cookie storage, the header array in the HttpResponse object remains empty.

Here is my setup:

Angular Request:

postLogin(user: string, pw: string): Promise<HttpResponse<any>> {

 return this.httpClient.post<HttpResponse<any>>(
   'https://localhost:443/login',
   'user=' + user + '&pw=' + encodeURIComponent(pw),
   {
     headers: new HttpHeaders({
       'Content-Type': 'application/x-www-form-urlencoded'
     }),
     observe: 'response',
     withCredentials: true
   }
 ).toPromise();
}

C# HttpListenerResponse:

internal void SendLoginResponse(HttpListenerResponse response, string token)
    {
        response.StatusCode = (int)HttpStatusCode.OK;
        response.KeepAlive = false;
        response.AddHeader("Server", "DSM Management");
        response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.AddHeader("Access-Control-Allow-Credentials", "true");
        response.AddHeader("Access-Control-Allow-Headers", "Set-Cookie");
        response.AddHeader("Access-Control-Expose-Headers", "Set-Cookie");
        response.AddHeader("Vary", "Origin");
        response.AddHeader("Set-Cookie", "token=" + token + "; path=/; HttpOnly");

        response.Close();
    }

Angular Response Method:

onSubmit(): void {
 const user = this.form.get('username').value;
 const pw = this.form.get('password').value;

 this.httpService.postLogin(user, pw).then(
   (response) => {
     console.log(response.headers);
   },
   (error) => {
     console.log(error);
   }
 );
}

Firefox Network Tab:

Firefox Request/Response Screenshot

HttpResponse object in Angular:

response object

Besides using the Promise technique I also tried the same approach with the Observable/Subscribe technique. Same results.

Sidenote: I know the jwt implementation using cookies and not the authorization header is not at it's best but I need to use this customer api.

May somebody help me getting those headers?

Edit: For testing purposes I already set the cookie httponly value to false. No difference, the header array is still empty.

Possible duplicate of [How to get a cookie from an AJAX response?](https://stackoverflow.com/questions/12840410/how-to-get-a-cookie-from-an-ajax-response) — mjwills, Aug 17 '18 at 13:03
I actually don't think it's about the cookie or httponly flag because the header array remains empty even with other response headers and no httponly flag set on the cookie. — user, Aug 17 '18 at 13:20
`I actually don't think` Alas you are incorrect. https://stackoverflow.com/a/1022119/34092 — mjwills, Aug 17 '18 at 22:15
Yes, you're right. Nevertheless it was confusing to not even get the cookie when it's not httponly. But this seems to be a restriction from angular or xhr. The header array is also always empty. Only if you request a specific header explicitly, the header will be shown in the array too. Very strange behaviour. — user, Aug 19 '18 at 12:19

score 0 · Answer 1 · answered Aug 17 '18 at 12:03

0

As the cookie is set HttpOnly, it cannot be accessed by JavaScript. Neither from document.cookie nor directly from HTTP response headers.

answered Aug 17 '18 at 12:03

Daniel Beckmann

286
2
8

Thanks for responding, please see my edited question. – user Aug 17 '18 at 12:19

Angular 6 Empty Header Array in HttpResponse

1 Answers1