Iframe a web app causes CSRF error only on Chrome but not on Firefox - http

Question

I'm trying to show a third-party web page (with their approval) in an iframe. This site has a different domain to my parent site. The iframed site has set their frame-ancestor to include my domain and I've set my frame-src to include their domain, so the framing permission itself is fine.
The site displays fine on firefox.
However on Chrome I get an error saying that the CSRF token is mismatched. This validation is done on the backend by the client site.
My question is why does firefox work when chrome does not? If both browsers caused the same error I wouldn't even be asking this question.
Please excuse the naivety of this question as my web experience is minimal as I'm a backend developer.
Thank you.

Answer 1

The difference is the SameSite cookie attribute behaviour. I'm guessing that the CSRF protection is partially based on some kind of a cookie interaction in the embedded third-party site. The cookie must be sent (along with other things most probably) to the third-party site so it can check forged requests.
The SameSite attribute is likely not set to any value for the CSRF cookie.
The default behaviour in Chrome (and many major browsers now) is to default to Lax, which means the cookie will not be sent across origins, so I think this is why it doesn't work in Chrome.
However, Firefox defaults to None, which means the cookie will be sent in your case, so the page works correctly.
The solution to this is that the 3rd party site should set the CSRF cookie with an appropriate SameSite value explicitly, probably None in this case, if (and only if!) this does not compromise the security of the solution - it's not possible to tell without further details, but an effective CSRF protection cannot solely be based on a cookie (that's the whole point), so setting it as SameSite=none would probably be ok.

Answer 2

The problem is going to be a difference in HTTP headers between the browsers. You need to inspect both and compare the difference between them.
Their are few different ways you can see these headers, both browsers have network connection inspection tools that you can use, you could write some server code to dump them in a log, or finally use a tool like WireShark to intercept them.
The most likely issue is going to be cookies not being shared with the iframe.
Once you have worked out what the difference is between the two browsers you can set the correct headers in Chrome. This will likely mean reading the required value from the parent page, copying it to the iframe and then setting it.
Sorry their is not more detail in this answer, but I don’t really have much to go on in your question.

Answer 3

As alluded in some of the answers the issue was Chrome setting the cookies, samesite value to 'Lax' by default for JSESSIONID cookie. So 3rd party sites did not get the cookie. The solution was to set the same site value to none. This was fine since we already have CSRF protections in place + the use of frame-ancestor CSP to restrict the iframe domains.
I added the following filter to add the samesite value (Setting samesite on server config level (Wildfly( didn't work for me)
private static final String SAME_SITE_ATTRIBUTE_VALUES = ";HttpOnly;Secure;SameSite=None";
private static final String SESSION_COOKIE_NAME = "JSESSIONID";
private static final String SESSION_PATH_ATTRIBUTE = ";Path=";
private static final String ROOT_CONTEXT = "/";
#Transactional
public void doFilter(HttpServletRequest req, HttpServletResponse res) {
Cookie[] cookies = req.getCookies();
if (cookies != null && cookies.length > 0) {
List<Cookie> cookieList = Arrays.asList(cookies);
Cookie sessionCookie = cookieList.stream()
.filter(cookie -> SESSION_COOKIE_NAME.equals(cookie.getName()))
.findFirst()
.orElse(null);
if (sessionCookie != null) {
String contextPath = req.getServletContext() != null
&& StringUtils.isNotBlank(req.getServletContext().getContextPath()) ? req.getServletContext().getContextPath() : ROOT_CONTEXT;
res.setHeader(HttpHeaders.SET_COOKIE, sessionCookie.getName() + "=" + sessionCookie.getValue()
+ SESSION_PATH_ATTRIBUTE + contextPath + SAME_SITE_ATTRIBUTE_VALUES);
}
}
}

Answer 4

Running into another problem now. The above filter solution worked fine on local testing environments.
The app was deployed to AWS, and now I see the cookie samesite is not being set. Is AWS overwriting it somewhere? So confused.