Vercel toolbar interfering with middleware/cookies

[leeuwd]

Page to Investigate

https://www.mrmarvis.com/nl

Steps to Reproduce

When the Vercel toolbar is active (i.e. the __vercel_toolbar cookie is having a value of 1), the middleware response differs than when the Vercel toolbar is not active (i.e. the __vercel_toolbar cookie is having a value of 0).

This behaviour is unpreferred since our developers now have a non-production experience of our Vercel/Next.js setup.

Our setup:

• Vercel hosted
• Next.js 14.2.3
• Turborepo
• Cloudflare reverse proxy active

To reproduce:

Correct:

# correct: Vercel toolbar disabled
  curl 'https://www.mrmarvis.com/nl' \
  -H 'accept: text/html' \
  -H 'accept-language: nl,nl-NL;q=0.9,en;q=0.8,de;q=0.7,la;q=0.6,da;q=0.5,fr;q=0.4,it;q=0.3,es;q=0.2' \
  -H 'cache-control: no-cache' \
  -H 'cookie: __vercel_toolbar=0; GeoCountryCodeCurrent=NL; GeoCountryCode=nl' \
  -H 'pragma: no-cache' \
  -H 'priority: u=0, i' \
  -H 'referer: https://www.mrmarvis.com/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: document' \
  -H 'sec-fetch-mode: navigate' \
  -H 'sec-fetch-site: same-origin' \
  -H 'sec-fetch-user: ?1' \
  -H 'upgrade-insecure-requests: 1' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36' \
    -o /dev/null \
  -D -

# response:
date: Wed, 12 Jun 2024 09:56:41 GMT
content-type: text/html; charset=utf-8
access-control-allow-origin: *
age: 59393
cache-control: public, max-age=0, must-revalidate
content-disposition: inline
referrer-policy: strict-origin-when-cross-origin
set-cookie: isOfficeRequest=true; Path=/; Secure; SameSite=strict
set-cookie: GeoCountryCodeCurrent=NL; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict
set-cookie: PrefCountryCode=nl; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict
set-cookie: pageViewCountWithNotice=0; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict
strict-transport-security: max-age=345600
vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch
x-content-type-options: nosniff
x-dns-prefetch-control: on
x-download-options: noopen
x-matched-path: /nl
x-vercel-cache: HIT
x-vercel-id: fra1::fkfxb-1718186201715-1f01b382d672
x-xss-protection: 1
cf-cache-status: DYNAMIC
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=bh%2BhxhEd6uvBCqOUikv6ACsg2jsJnmOPTmpT3Du66ZD70vYGIYygoINjrwkvacjSvgt%2FGJdEGH3TEzAWEjQ4rybReme4f7wAlamobsBjAwmK40Tj%2Bw%2BHVhLkIlNxI28jsbk%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 8928f8f079321c92-AMS
alt-svc: h3=":443"; ma=86400

Incorrect:

# correct: Vercel toolbar disabled
  curl 'https://www.mrmarvis.com/nl' \
  -H 'accept: text/html' \
  -H 'accept-language: nl,nl-NL;q=0.9,en;q=0.8,de;q=0.7,la;q=0.6,da;q=0.5,fr;q=0.4,it;q=0.3,es;q=0.2' \
  -H 'cache-control: no-cache' \
  -H 'cookie: __vercel_toolbar=1; GeoCountryCodeCurrent=NL; GeoCountryCode=nl' \
  -H 'pragma: no-cache' \
  -H 'priority: u=0, i' \
  -H 'referer: https://www.mrmarvis.com/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: document' \
  -H 'sec-fetch-mode: navigate' \
  -H 'sec-fetch-site: same-origin' \
  -H 'sec-fetch-user: ?1' \
  -H 'upgrade-insecure-requests: 1' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36' \
    -o /dev/null \
  -D -

# response:
date: Wed, 12 Jun 2024 09:56:52 GMT
content-type: text/html
cache-control: public, max-age=0, must-revalidate
location: /de/?redirected=true  # <- unexpected
referrer-policy: strict-origin-when-cross-origin
strict-transport-security: max-age=345600
x-content-type-options: nosniff
x-dns-prefetch-control: on
x-download-options: noopen
x-vercel-id: fra1:fra1:fra1::sddn5-1718186212403-1435322db4e2
x-xss-protection: 1
cf-cache-status: DYNAMIC
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=JZajxWtklZtHngrLBZUlmhTVqHsJcH9tNMm9D%2BNUbHcvCfZMLMhx76oWjsXuC%2BwnEF5GnFBPV1DK3qCl4O0klIeQw455tQOMwmh4nl53S1CmdCYYqVho1rD54LqnYyBKZ8k%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 8928f9336983664c-AMS
alt-svc: h3=":443"; ma=86400

Screenshot:

Please notice the difference in response. The correct/preferred behaviour is the response with the HTTP set cookies headers:

# correct
set-cookie: isOfficeRequest=true; Path=/; Secure; SameSite=strict
set-cookie: GeoCountryCodeCurrent=NL; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict
set-cookie: PrefCountryCode=nl; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict
set-cookie: pageViewCountWithNotice=0; Path=/; Expires=Thu, 12 Jun 2025 09:55:06 GMT; Secure; SameSite=strict

The incorrect response is the middleware somehow deciding we should be redirected since we're from Germany (we run a geo-check in our middleware that takes the Cloudflare country header:

# incorrect
location: /de/?redirected=true

Question

How can we ensure our middleware's logic does not change based on the Vercel toolbar being active?

[amyegan]

Thanks for reporting this! We released a change so this should not be a problem for you anymore. 🙂

[leeuwd]

Awesome, thank you @amyegan