After upgrading to Ionic 4, our payment feature doesn’t work on iOS.
It works on PWA and Android but not on iOS.
We are loading the 3rd party code into an
iframe and this is blocked on iOS because of the 3rd party’s CSP (Content Security Policy) header.
The CSP header contains
frame-ancestors http: https:
This means that the frame can only be loaded into a parent originating from
https: but Ionic 4 uses
ionic: on iOS. See this question.
I can load other content in the
iframe without any problems.
I also set up a test server where I can serve a test-page with the CSP header set including the
frame-ancestors http: https: directive and the test-page won’t display.
ionic: to the list of
frame-ancestors solves the problem with my test server but this is a 3rd party page and server.
Is there a work-around?
Error message accessing 3rd party:
[Error] Refused to load https://v1.checkout.supplier.com/?ui=inline&language=en-US#xTokenx because it does not appear in the frame-ancestors directive of the Content Security Policy.
Error message from test-server:
[Error] Refused to load http://192.168.1.129:3000/ because it does not appear in the frame-ancestors directive of the Content Security Policy.