Cookie header encoding

[r34son]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/interesting-babbage-2lwwy5

To Reproduce

open preview in new window
refresh page to ensure cookie is set
see log in terminal

Current vs. Expected behavior

Current - user_name=John%2FDoe
Expected - user_name=John/Doe

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.2.2-canary.0 // Latest available version is detected (15.2.2-canary.0).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Now i need to do:

const requestHeaders = Object.fromEntries(headersList.entries());
if (requestHeaders.cookie) {
    requestHeaders.cookie = decodeURIComponent(requestHeaders.cookie);
}

[Bashamega]

Hello @r34son
Cookies are not encoded by default because the document.cookie API operates as a simple string-based key-value store. It does not internally handle the encoding or decoding of special characters.
So you would need to encode it and decode it yourself.
This is the best way to do it:

"use client";

import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    document.cookie =
      "user_name=" +
      encodeURIComponent("John/Doe") + // Encode the value
      "; expires=" +
      new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toUTCString() +
      "; path=/";
  }, []);

  return "home";
}
```

[r34son]

@Bashamega The problem is that the cookie returned from headers() becomes encoded.

[r34son]

My quess is that issue somewhere here https://github.com/vercel/next.js/blob/canary/packages/next/src/compiled/%40edge-runtime/cookies/index.js#L216-L219
After set or delete on cookies object headers object gets mutated with encoded cookie. Maybe next internally calls this methods?

[r34son]

Previous w/a:

const requestHeaders = Object.fromEntries(headersList.entries());
if (requestHeaders.cookie) {
    requestHeaders.cookie = decodeURIComponent(requestHeaders.cookie);
}

It errors on some cookie values with error: Invalid character in header content ["cookie"]

Trying new w/a:

const requestHeaders = Object.fromEntries(headersList.entries());
if (requestHeaders.cookie) {
    requestHeaders.cookie = (await cookies())
        .getAll()
         .map((c) => `${c.name}=${c.value}`)
        .join('; ')
}

@samcx Hi! Could you please take a look?

[r34son]

@edge-runtime/cookies is extracted into another package in this pr vercel/edge-runtime#103

[r34son]

Something similar #77022

[r34son]

Hey @samcx! Sorry for the ping! I was just wondering if you had a chance to check this issue out.