Search code examples
iosionic-frameworkiframe

One of my iframe is not working/loading ios ionic


One of my iframe is not working/loading in IOS only (mobile and emulator) while it is working fine android/chrome/safari. It happens to only one iFrame, while a second is working (in IOS).

I have the following message error: webPageProxy::didFailProvisionalLoadForFrame: frameId = 26, domain = nsurlErrorDomain, code: -999.

I have implemented both answer from stackoverflow: Ionic iframe loading not fully working on iOS iframe is not working in iOS (ionic framework)

Plus i have sanitize the url of the iFrame. Nothing seems to work, the iFrame is white.

The url I am passing (in case it is working:) https://preprod-tpeweb.paybox.com/cgi The url I am passing (in case it is not working https://secure-test.dalenys.com/front/form/process

These two urls are from action POST form, with an iFrame as a target.

Do you have any idea what to do ? Would it be possible that the host has badly set its website ?

Would it be possible that it comes from the fact that the iFrame has this error: Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute ?

update: We had the following error: “Refused to load https://secure-magenta1.dalenys.com/front/form/process because it does not appear in the frame-ancestors directive of the Content Security Policy.”


Solution

  • We had the following error: “Refused to load https://secure-magenta1.dalenys.com/front/form/process because it does not appear in the frame-ancestors directive of the Content Security Policy.”

    The CPS, from my understanding is what securized your website of being embedded by another one.

    And indeed the third party request header CSP frame-ancestors is set to:

    Content-Security-Policy : default-src * 'unsafe-inline'; frame-ancestors * gap:; img-src * data:
    

    To allow IOS in app browser to access by an iFrame to this request, just either:

    • remove frame-ancestors. Which would give in our case: Content-Security-Policy : default-src * 'unsafe-inline'; img-src * data:
    • allow ionic capacitor, by changing the CSP by: Content-Security-Policy : default-src * 'unsafe-inline'; frame-ancestors * gap: capacitor:; img-src * data:

    note: I do not recommend to use the wild-card in standalone with frame-ancestors because it is the same as using default configuration. Plus it seems that the in app browser IOS is not able to read it. It is just the third party that set it this way.