Cypress Authentication Header Overflow Error

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:

Error Message

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:

Cypress package.json

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



comments powered by Disqus

Please consider using Brave and adding me to your payment ledger. Then you won't have to see ads!

Support me and download Brave!

Use Brave