cookiesmicrosoft-edgeexpress-sessionsamesite

How to bypass SameSite cookie restriction in Microsoft Edge during local development (HTTP) so browser can accept cookie send from backend


I'm working on a local development project where I have an Angular frontend running on port 4200 and an Express backend running on port 3000, both served over HTTP. I need to use cookies with SameSite=None to allow for browser to accept and save cookie sent from backend for session management. However, Microsoft Edge enforces the rule that cookies with SameSite=None must be set with Secure=true for it to accept the cookie sent from backend.

I’ve tried disabling the "Cookies without SameSite must be Secure" flag in Edge's edge://flags settings, but it seems that this flag has been removed in recent versions. I am currently using edge version Version 131.0.2903.146 (Official build) (64-bit)

Is there a way I can bypass this so I can test how a cookie is handled? here is my current `express-session' configs for reference:

app.use(session({
   name: 'express-session-id',
   secret: process.env.session_secret,
   resave: false,
   saveUninitialized: false,
   store: sessionStore,
   cookie: {
       secure: false,
       httpOnly: true,
       maxAge: 1000 * 60 * 3,
       sameSite: 'none'
   }}));

Questions:

1- Is there any way to disable the SameSite cookie enforcement in Microsoft Edge during local development without using HTTPS?

2- If not, what alternatives do I have to test cross-origin cookies with SameSite=None while using HTTP?

3- Are there any developer tools or workarounds to bypass this restriction temporarily?

What I have tried:

1- Setting secure: false in my session cookie configuration.

2- Searching for the flag in edge://flags to disable SameSite enforcement.

I have checked other similar questions however all the answers seem to be outdated as Edge has been updated since, is there a more current solution for this? or is there any quicker work arounds?

If there is a similar question that has an answer that i missed, please point me to it!

Thanks in advance!


Solution

  • As @heiko has pointed out in his comment:

    http:localhost:3000 and http:localhost:4200 are considered same site AND cross origin. Meaning when setting cookie config, the SameSite field can be set to strict given that the request is being send from another port on the same site, making it SameSite.

    The code changed:

    cookie: {
        secure: false,
        httpOnly: true,
        maxAge: 1000 * 60 * 3,
        sameSite: 'strict' // Right here, changed from 'none' to 'strict'
    }}));
    

    Here is an in-depth answer for anyone who faces the same issue:

    Understanding the Terminology

    Same-Site: "Same-Site" refers to requests made within the same registrable domain, ignoring the protocol, port, and subdomains.

    For example, http://example.com and https://example.com are considered "same-site" because the domain (example.com) matches. Similarly, http://localhost:3000 and http://localhost:4200 are "same-site" because they share the same base domain: localhost. This concept is primarily relevant when dealing with cookies and the SameSite attribute, which determines whether cookies are sent with cross-site or same-site requests.

    Cross-Origin: "Cross-Origin" is a stricter term. For two URLs to be considered same-origin, their protocol, domain, and port must all match.

    Since http://localhost:3000 and http://localhost:4200 use different ports, they are cross-origin. This distinction is critical for browser security features like the Same-Origin Policy and CORS (Cross-Origin Resource Sharing), which govern whether resources can be shared between different origins.