March 28, 2020 Automated Testing DevOps
Cypress.io and Asp.Net Core 3.1 Header Overflow Error
A colleague shared this problem with us over lunch. We’ve been excited about Cypress as a UI automation tool since we (Omnitech) first saw it presented at NDC 2019 . I have past experience with Selenium and while it worked, I had too many hours trying to figure out why it tried to continue before the DOM was ready (and many other flaky test problems). Cypress promises to solve that and adds a lot more features. It’s a decade newer technology and shows a lot of promise.
We were seeing “CypressError: Cypress detected a cross origin error happened on page load” or Header Overflows error when trying to login. It didn’t happen on other applications we are using Cypress for.
The error in Cypress will look similar to the below image:
We got the Cross Origin error when attempting to do a form post and the Header Overflow when doing a JS post. We tried changing the chromeWebSecurity: false, but that didn’t fix it.
It seems both of them can stem from the issue of the server (.NET Core 3.1) issuing cookies/claims that are too large. You might have something like this:
var claims = new List<Claim>
{
new Claim(ClaimTypes.NameIdentifier, user.UserName),
new Claim(ClaimTypes.Name, user.UserLogin),
new Claim("UserId", user.UserId.ToString(CultureInfo.InvariantCulture)),
new Claim("OrgId", org.OrgId.ToString(CultureInfo.InvariantCulture)),
new Claim("OrgLoginId", org.OrgLoginId),
new Claim("OrgTypeId", org.OrgTypeId.ToString()),
new Claim("OrgName", org.OrgName),
new Claim("OrgTimeZone", org.TimeZone.TimeZoneName),
new Claim(ClaimTypes.Email, user.UserEmail),
new Claim("AspNet.Identity.SecurityStamp", user.SecurityStamp),
new Claim("AuthorityId", authority.AuthorityId.ToString(CultureInfo.InvariantCulture)),
new Claim("UserIPAddress", HttpContext.Connection.RemoteIpAddress.ToString()),
new Claim("LastUsedModule", user.DefaultModule.ToString())
};
claims.AddRange(await GetOrgModuleAccessClaims(org.OrgId));
claims.AddRange(await GetUserRoleClaims(user));
claims.AddRange(await GetUserPermissionClaims(user));
claims.AddRange(await GetUserPolicyClaims(user));
// claims need to be distinct
var distinctClaims = claims
.GroupBy(cliam => new { cliam.Type, cliam.Value })
.Select(group => group.First()).ToList();
var identity = new ClaimsIdentity(distinctClaims, CookieAuthenticationDefaults.AuthenticationScheme);
var principal = new ClaimsPrincipal(identity);
var authenticationProperties = new AuthenticationProperties()
{
IsPersistent = true
};
await HttpContext.SignInAsync(
CookieAuthenticationDefaults.AuthenticationScheme,
principal,
authenticationProperties
);
The below command will increase the max header size that Node allows and fix the issue.
set NODE_OPTIONS=--max-http-header-size=1000000
Make sure to run it before opening cypress, for example:
set NODE_OPTIONS=--max-http-header-size=1000000 && cypress open
Your package.json could look like this:
One way to test if the headers are the issue is to comment/remove your login code that adds claims. .NET Core has a very large format for claims and if you have lots of them the resulting cookie/headers that contain them can get very large.
More information about the issue is here: https://github.com/cypress-io/cypress/issues/5602
Please consider using Brave and adding me to your BAT payment ledger. Then you won't have to see ads! (when I get to $100 in Google Ads for a payout, I pledge to turn off ads)
Also check out my Resources Page for referrals that would help me.
Use Swan Bitcoin to onramp with low fees and automatic daily cost averaging and get $10 in BTC when you sign up.