1

I am trying to build a mobile client for an existing web application using Ionic 3/Angular 4.3.

We are using cookies for sessions and CSRF protection. I have implemented the following HttpInterceptor in order to attach and send token cookies with HTTP requests:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from "rxjs";
import { CookieService } from 'ngx-cookie';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private cookies: CookieService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    var authReq = this.cookies.get('XSRF-TOKEN') ? request.clone({
      withCredentials: true,
      headers: request.headers.set('X-XSRF-TOKEN', this.cookies.get('XSRF-TOKEN'))
    }) : request.clone({ withCredentials: true });
    return next.handle(authReq);
  }
}

Testing from the browser works fine as long as I run with ionic serve address=localhost (address flag needed to bypass CORS).

However, cookies do not seem to be sent or persisted when testing from an Android device using ionic cordova run android.

As you can see from above, I have set withCredentials to true as most answers to similar posts suggest.

Jack C
  • 1,044
  • 2
  • 12
  • 22
  • Is the server-side component handling the pre-flight request the custom request header requires correctly? – CBroe Oct 19 '17 at 20:52
  • @CBroe I have allowed all origins on the dev server, however not on production server (I have been reading that this is not necessary as devices access with the origin ```file```) – Jack C Oct 19 '17 at 20:52
  • Talking about https://stackoverflow.com/a/13997235/1427878 – CBroe Oct 19 '17 at 20:55
  • @CBroe Yes I have set the allowed origins, headers, credentials, and exposed headers accordingly. – Jack C Oct 19 '17 at 23:17
  • Then I'd suggest you hook up an Android device to a computer, so that you can do some remote debugging via Chrome dev tools or similar, so that you can check for errors, whether the cookie is received in the first place, etc. – CBroe Oct 19 '17 at 23:19

1 Answers1

0

Cookies are not a good way of handling authentication on mobile devices. There are multiple cookie stores (the webview has one, there is a native one, and I think even some HTTP modules have one) so they would have to be in sync to work reliable. Android had its own CookieSyncManager as a utility for that (newer webviews are able to to it on their own apparently). Also when your device is on low memory cookies are in front row to get cleared by the operating-system. As a result your cookies will get lost every now and then and your users will be upset because they have to login again.

So what should you do instead? You should implement a token based authentication system. Use native-storage or some sql-lite storage to store the token.

David
  • 7,387
  • 3
  • 22
  • 39
  • 3
    While I appreciate the information, this does not answer the question I asked. A rewrite of the authentication code is not an option at the moment, and I cannot access the token cookie in JS as the HttpOnly flag is set. – Jack C Oct 20 '17 at 18:12
  • It _may_ very well answer your question. You wrote "... _cookies do not seem to be sent or **persisted**_ ..." which may be due to the fact that cookies are a very volatile thing on mobile devices. – David Oct 20 '17 at 18:25