CSP Frame Ancestors for Capacitor Apps with 3D Secure Payment Integration

Ionic Framework
1

I’m integrating a payment provider that uses a 3D Secure authentication iframe. The flow is as follows:

  1. The payment provider returns an HTML string for the 3D Secure authentication.
  2. This HTML is set as the srcdoc of an iframe in our app.
  3. Upon successful payment, the iframe redirects to a success URL (which we can configure in the payment provider’s panel).

To handle the redirect, I’m using our API server (different from the Capacitor webapp server) as the redirect target. This requires setting the CSP_FRAME_ANCESTORS on our API server to allow it to be framed by our webapp and Capacitor apps.

Currently, I have:
CSP_FRAME_ANCESTORS = ("'self'", "https://*.mywebapp.com", "file:", "my_app://")

This works for the web app but not for iOS and Android Capacitor apps. Interestingly, using "*" works for the webapp but still fails for mobile apps.

Questions:

  1. What CSP_FRAME_ANCESTORS configuration would allow framing in both web and Capacitor apps (iOS/Android)?
  2. Are there any Capacitor-specific considerations for handling iframes and CSP?
  3. Is there a better approach to handle 3D Secure redirects in a Capacitor app?

Any insights or best practices would be greatly appreciated!

2

Capacitor may require additional handling for iframe embedding, especially for mobile, to ensure the app’s security settings and app-specific configurations align with the CSP rules.

1 Like
3

When I whitelisted the following:

"'self'", 
"https://*.mywebapp.com", # web
"ionic://", # iOS
"http://localhost:*" # Android

it worked.