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

TL;DR

We changed nothing in our code. What changed and how do we fix it?

Steps

1. 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?
2. 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.

When to use

You are seeing this: Our Typeform embed recently stopped loading inside our Capacitor and Cordova mobile apps. Use this skill when you run into "Typeform embed blocked in Capacitor/Cordova: CSP frame-ancestors violation".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

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