Whitelisting Ionic app in Salesforce Org for CORS/CSP

Question

We are trying to integrate the Salesforce Embedded Messaging widget into my ionic cordova application.

Ionic CLI                     : 6.17.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework               : @ionic/angular 5.9.4
@angular/cli                  : 11.1.2

Cordova:

Cordova CLI                   : 10.0.0 ([email protected])
Cordova Platforms             : android 10.1.2, browser 6.0.0, ios 6.3.0

Ionic application locally runs on http:/localhost:8101 so we whitelisted it on Salesforce and it worked well for both IOS and Android.

On production, the Ionic app has the hostnames as these:

IOS ==> ionic://localhost
Android ==> http://localhost

Problem: Salesforce doesn't allow whitelisting any origin except with HTTP/HTTPS protocol. Ionic doesn't allow to use HTTP/HTTPS scheme for IOS (details here). That means we can not whitelist the widget iframe for ionic IOS.

Tried Solution To bypass CORS in IOS, I hosted the proxy server cors-anywhere and used it in an XMLHttpRequest interceptor on the client side. It works and downloads all the widget-related files.

Unfortunately, the widget still doesn't work because of the Content Security Policy directive

Refused to frame 'https://example.com' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost http://localhost:8101". 

Is there any way we can get out of this debacle by:

• whitelisting ionic://localhost in Salesforce?
• Bypassing CSP on the client side?
• Or any other way?