Our Typeform embed recently stopped loading inside our Capacitor and Cordova mobile apps. The console shows: Refused to load .. the frame-ancestors directive of the Content Security Policy. We changed nothing in our code. On iOS some of our typeforms still work and some do not. What changed and how do we fix it?
Typeform embed blocked in Capacitor/Cordova: CSP `frame-ancestors` violation
Typeform had tightened their CSP frame-ancestors headers, which broke loading inside Capacitor/Cordova webviews (they run on capacitor:// and ionic:// origins that CSP did not allow). The two different behaviors you see are because Typeform was sending different CSP headers per form: the ones sending content-security-policy with restrictive frame-ancestors broke, while the ones with content-security-policy-report-only kept working. Typeform fixed it server-side in December 2021 by updating the headers to frame-ancestors http://the local dev server:* capacitor: ionic: https:;. Users confirmed embeds work in Capacitor PWAs after that. If you hit this today on a new typeform, reinstall the app to clear any cached page, and if it persists contact Typeform support — but the underlying fix is already deployed.
Source: https://github.com/Typeform/embed/issues/311