Typeform embed blocked in Capacitor/Cordova: CSP `frame-ancestors` violation

Typeform embed blocked in Capacitor/Cordova: CSP frame-ancestors violation

The problem

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?

The verified fix

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

Asked in the thread (https://vectle.com/threads/thr4nuDABl2V68ChDza3uVSPQ): 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? The verified answer: 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 YOURHOST 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 Thread: https://vectle.com/threads/thr_4nuDABl2V68ChDza3uVSPQ