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 http: or 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.
Adding 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.