I have my Ionic/angular 2 app that is running on localhost:8000 The app will run eventually on browser platform. The app is calling a RESTFull api hosted on my local machine on https://adawy/api, where adawy is my hostname and defined in both hosts file and in apache virtual hosts. The server side is Slim 3.
The API upon authentication is returning a JWT to be used with all requests.
My goal is to protect the token from cross site request forgery and cross site scripting. Saving the token in a javascript variable or in any form of local storage would make the JWT accessible from javascript.
I found that the best way is to return the JWT to as an HTTPOnly cookie. So it won't be accessible from javascript and would be sent only by the browser with any upcoming requests to adawy domain.
I had returned the token successfully as a cookie but the problem is that the cookie is not sent with any next XHR requests. 
 
Also, I cannot see the cookie in the Cookies section in Devtools.
I know that angular can support in such matter by looking for XSRF-TOKEN cookie. 
It is not working either, as you can see I set the name of the cookie to XSRF-TOKEN but yet, with any other request, this cookie is not sent.
I wonder how this would be secured as if angular has access to this cookie, so would any other script?
Here is the next request, with no cookie sent. Please ignore the header Authorization as my angular code is setting it directly. 
In my angular app, I am setting the withCredentials: true option while making the last get request. 
Update
I had used adawy.com and I still have the same issue.


 
    