Koa: this.cookies.set() cannot set cookie to chrome correctly

[freestyle21]

I came across a strange scene.

In the entry js file:

app.use(function*(next) {
    this.cookies.set('test', 999999);
    return yield next;
})

This is ok in both HTTP Response Header and Chrome Devtool Resources 's Cookies.

But...

When I put the this.cookies.set to Get Reponser

app.get('/v1/test', function *(next) {
    this.cookies.set('test1', 66666);
    this.body = { code: 200, message: 'success'}
    return yield next;
})

The HTTP Reponse Header is ok

Set-Cookie: test1=66666; path=/; httponly

The Chrome Devtool Resources's Cookies display no cookie !

I have debugg this for long time, please help me ~

[PlasmaPower]

The cookie is marked by default as HTTP only. If you go to network, refresh the page, click on the page load request, go to the cookies tab, you'll see that the cookie has a check mark in the HTTP column. This means that the webpage cannot access the cookie, only the server. You can set a cookie not to be httponly like this:

this.cookies.set('test', 1234, { httpOnly: false });

More documentation can be found here: https://github.com/pillarjs/cookies

[freestyle21]

@PlasmaPower Thx for reply.

I think there is no relation with httpOnly, httpOnly's cookie can also show in the cookie panel. And I have test either httpOnly: true and httpOnly: false.

[PlasmaPower]

Those cookies are still being set with the HTTP flag in your repo

If you add a third argument to this.cookies.set which is { httpOnly: false }, then it isn't marked as HTTP:

After that, typing document.cookie into the console will have properly set cookies.

[freestyle21]

sorry that the demo repo I give may cannot display my puzzled..and I know what you said.

Simple point:

code:

    app.use(function*(next) {
        this.cookies.set('first', 1111111, {
            httpOnly: false
        });
        return yield next;
    })

    app.get('/v1/test/', function *(next) {
        this.cookies.set('second', 22222, {
            httpOnly: false
        })
        this.body = {code: 200, message: 'success'}
        return yield next;
    })

chrome:

---

---

so, I don't know why the second is not showed on chrome cookie panel.

[PlasmaPower]

@freestyle21 On the first tab you screenshotted there, which showed all the requests, try clicking the cookies tab right next to headers, preview, and response. Then scroll down to the Response Cookies section. Could you take a screenshot of that?

[freestyle21]

@PlasmaPower

this tab have the cookie I want !

but why the Resources Cookie Tab show empty, and document.cookie equal empty string..

[PlasmaPower]

@freestyle21 Are you sure they are on the same domain? There's no HTTP checkmark so you're good there.

[freestyle21]

@PlasmaPower
Here is my app url:

---

---

---

they are all in the domain 9.xiaojukeji.com, Is there any problem?

and I don't understand your "no HTTP checkbox"...

thx.

[PlasmaPower]

@freestyle21 If you type document.cookies in the console, does it show up there? Also, are you sure your JS isn't removing the cookies?

[PlasmaPower]

@freestyle21 Also, this is certainly not a koa problem, it's either a cookies bug (which provides the this.cookies object for koa), a Chrome bug, or most likely an error with their use.

[freestyle21]

document.cookie show only first=1111111, no second=22222. this is just my puzzled.

I have not operate the cookie in js...

so, this problem confuse me for a long time.

[PlasmaPower]

@freestyle21 assuming you aren't restarting Chrome which would clear the session cookies, I can't help any more without an example demonstrating the problem.

[jonathanong]

@freestyle21 hi, can you open this issue here? https://github.com/pillarjs/cookies/issues

thanks

[freestyle21]

@PlasmaPower @jonathanong Thx for reply.

I find this is a bug of isomorphic-fetch in the end, which work well when change to jquery.

[dead-horse]

@freestyle21 I think you need this https://github.com/github/fetch#sending-cookies

[freestyle21]

@dead-horse oh yeah, you are right.

[luckydrq]

@freestyle21 @dead-horse I think the issue aims at receiving cookies problem, not sending. If i'm wrong, correct me.

[qiuyaofan]

I have the same issue.I add ctx.response.set('Access-Control-Allow-Credentials', true);
there is no error,and I can find cookie in response,but it can't add in cookie successfully.someone can help?

[nodefish]

I was struggling with this and resolved it by doing the following:

• koa-cors: don't use a wildcard origin. I switched to the default value (which uses the origin from req.header), or else you get "Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true." (Firefox devtools reported this, but I was using an older Chromium that did not!).

• koa-cors: set the option credentials to true

• Set secure: true on the cookie. During development this is hard to get working because chances are you have a client on http://localhost (not https -> browser quietly fails to set the cookie). I suspect there is some elaborate security logic that requires secure: true for CORS and/or using XHR withCredentials.

ctx.cookies.set does not work for this if you're behind a reverse proxy, because it prevents you from using secure cookies if it can't detect HTTPS. You can override that by following these instructions: https://github.com/pillarjs/cookies/issues/51#issuecomment-568182639

example:

const Cookies = require('cookies');
const cookies = new Cookies(ctx.req, ctx.res, { secure: true, httpOnly: true });
cookies.set('my-cookie', cookie_payload);

• On the client side, set xhr.withCredentials=true (or the fetch equivalent opts {credentials: true}).