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!
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.