Is it possible to add a Sitecore Form in an iframe?

Question

We want to reference a page from Sitecore with a Sitecore Forms form inside it to an external site. However, when I did so. I encountered xxx things:

1. The iframe threw an error regarding the X-Frame-Options
   • To fix this, I added the frame-ancestors 'self' https://external.site in the header
2. Once this was resolved, every time I blur from the field it shows an alert popup saying Your session has expired. Please refresh the page
3. When I tried submitting the form, the form failed to submit. Upon checking, I discovered that the form submit returned a Message: The required anti-forgery cookie "__RequestVerificationToken" is not present. message.

So the question is: is it really possible to reference a Sitecore Form in an iframe? If yes, which area of the environment should I look for in order to resolve the issues #2, #3 above?

Answer 1

It looks like an ideal case for using Embeddable Forms Framework (EEF) that ships with Sitecore 10.3 when using forms with external sites.

#2 and #3 are closely related to CSRF, brief details are here by Mark Forms message - Your session has expired.

You can try out the below step for #3.

1. This could be because of caching. Can you check if your rendering component or container/page level caching check box is checked? if so, unchecking the caching will fix the issue.
2. Also here is a quick check you can do to see whether your form is cached – Inspect the form and check the _requestverificationtoken value like below and refresh the page – do you see the same value now? if so, your form is in the cache!
3. Bypassing Sitecore’s Request Verification Link.

Hope it helps!

Answer 2

I was able to fix the issue! The problem lies on the SameSite cookie property of ASP.NET_SessionId and __RequestVerificationToken. By default, it was set to Lax. So, I created a pipeline that would change these cookies’ SameSite property to None and that resolved the issue.

Be sure that your .NET Framework version is 4.7.2 and later.

Reference: https://web.dev/samesite-cookies-explained/