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