I have a website www.hello.app (example url) and a server www.server.hello.app. The server sends http-only cookie for authentification.
I've added the attribute sameSite: "lax" when creating the cookie. sameSite: "none" and sameSite: "lax" don't work with Safari. It doesn't store any cookie, so the user can't perform any request on the server.
return res
.status(200)
.cookie("hello", token, {
expires: new Date(Date.now() + msPerDay * 14),
httpOnly: true,
secure: true,
sameSite: "lax",
})
.json({ user });
I've heard it's a bug, but I can't believe such a widely used browser hamper authenticated requests like this!
Is there a way to fix this?
Related
I am making an ajax GET call currently from localhost:8090 with following:
$.ajax({
url: 'https://dev-855592.okta.com/api/v1/sessions/me',
method: 'GET',
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
success : function(data){
console.log(data);
},
error : function(data){
console.log('Session not found');
},
});
As this is an Okta call, it requires cookies to be sent with the request.
But IE 11 is not sending any cookies in the request.
I tried floowing things already:
"Access Data Sources Across Domains : Enabled" in ie11 settings in trusted sites. This solution is working.
But I don't want any impact on end-user and assuming end user has already accepted third party cookies, what should be the best way to achieve this?
If you want to enable CORS requests in IE 11, your server must attach the following headers to all responses:
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL
Access-Control-Allow-Headers: Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If
Access-Control-Expose-Headers: DAV, content-length, Allow
Optionally you can also attach the Access-Control-Max-Age header specifying the amount of seconds that the preflight request will be cached, this will reduce the amount of requests:
Access-Control-Max-Age: 3600
You could refer to this link about implementing CORS for a specific server.
I'm having an issue where the Chrome DevTools Protocol returns { success: false } when sending a Network.setCookie request with sameSite set to "None".
What could the issue be? "Lax" and "Strict" appear to work fine.
sameSite can only be set to "None" on a secure cookie. Try passing { sameSite: "None", secure: true }.
More info on SameSite=None: https://web.dev/samesite-cookies-explained/#changes-to-the-default-behavior-without-samesite
I want to set token to cookies after user logged in on the website.
I found this apollo-server-plugin-http-headers package.
So I'm trying to do this in my resolver.
async loginUser(_, { loginInput }, context) {
...
const token = generateToken(user);
context.setCookies.push({
name: "cookieName",
value: token,
options: {
httpOnly: true,
maxAge: 3600,
path: "/",
sameSite: true,
secure: true
}
});
console.log(context, 123)
return {
...
token
}
In setting up apollo server in
const httpHeadersPlugin = require("apollo-server-plugin-http-headers");
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [httpHeadersPlugin],
context: {
setHeaders: new Array(),
setCookies: new Array(),
}
});
I'm checking browsers cookies tab, in Chrome application -> cookies, but nothing is set there. I'm not sure what am I doing wrong? Maybe there is another way to do it?
All the help will be much appreciated
You cannot set the cookie option secure for localhost, i.e. in development mode. Try setting secure: process.env.NODE_ENV === 'production'
That is:
context.setCookies.push({
name: "cookieName",
value: token,
options: {
httpOnly: true,
maxAge: 3600,
path: "/",
sameSite: true,
secure: process.env.NODE_ENV === 'production'
}
});
Trying to do cookies with schema stitching was a bear for me to figure out. For a deeper dive you can check out this repo which uses the apollo-server-plugin-http-headers plugin.
I have a Vue.js PWA with a Django Rest Framework backend which works correctly locally on my laptop (using a browser). When I deploy it to production it continues to work correctly when I log in using a browser, however it fails to login when opened as a PWA (ie: on a phone or a PWA saved in a browser).
Here's my login code:
axios
.post("/api/get-token/", user)
.then(res => {
localStorage.setItem('user-token', res.data.token);
axios.defaults.headers.common['Authorization'] = res.data.token;
commit(AUTH_SUCCESS, res.data);
resolve(res);
})
.catch(err => {
commit(AUTH_ERROR, err);
reject(err);
});
As mentioned, everything works locally and in production when logging in via a browser. The problem comes when trying to log in using the PWA.
When trying to login to the PWA, I get the following:
POST https://www.example.com/api/get-token/ 401 (Unauthorized)
Doing a console log of the error received from the server I get:
{
detail: "Invalid token header. No credentials provided."
__proto__: Object
status: 401
statusText: "Unauthorized"
headers: {allow: "POST, OPTIONS", connection: "keep-alive", content-length: "59", content-type: "application/json", date: "Thu, 06 Feb 2020 15:00:11 GMT", …}
config:
url: "/api/get-token/"
method: "post"
data: "{"username":"test#example.com","password":"password"}"
headers:
Accept: "application/json, text/plain, */*"
Authorization: "Token "
Content-Type: "application/json;charset=utf-8"
__proto__: Object
transformRequest: [ƒ]
transformResponse: [ƒ]
timeout: 0
adapter: ƒ (t)
xsrfCookieName: "csrftoken"
xsrfHeaderName: "X-CSRFToken"
maxContentLength: -1
validateStatus: ƒ (t)
}
In production, the following works:
Log into the site using a browser on my laptop or on a phone.
Then open the PWA. This works correctly and I can continue using the PWA.
The only issue comes when trying to log in using the PWA.
Can you log in on a phone locally? I had this problem too once, the problem was that the frontend and backend were not running on the same host. This solved my problem:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:5000'
}
}
}
I eventually figured out the issue. For some reason the following was being POSTed in the header: Authorization: "Token ".
This is really strange because when logging in using the /api/get-token/ there is no token required since this is the login route. Also, it works perfectly from a browser. The only issue is when trying from a PWA.
Anyway, changing the header to explicitly have no value for Authorization fixed the issue as follows: Authorization: ""
I'm working on https and I had a problem about a cookie
If I deploy in a http, cookie is stored and read normally. But when deploy in https, cookie is not stored and read also even though I set a "secure=true" in a jquery cookie configuration like this
$.cookie("mycookie", "hello", { expires: 365, path: "/", secure: true });
and...
$.cookie("mycookie", "hello", { expires: 365, path: "/" }); is not work as well
Do you have some idea to get the cookie works with https protocol?