Help with Iframe in Ionic React

Ionic Framework Ionic React
1

Hello, I have an react capacitor app,
where i have to use hostname as prod url to avoid CORS issues like https://en.wikipedia.org,
So updated capacitor.config.ts to

  appId: 'io.ionic.starter',
  appName: 'myApp',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    hostname:'en.wikipedia.org'
  }
};

My app also loads url(United States - Wikipedia) in iframe ,
Issue : In iframe instead of page, it is reloading the same app again as domain matches
const config: CapacitorConfig = {
appId: ‘io.ionic.starter’,
appName: ‘myApp’,
webDir: ‘dist’,
server: {
androidScheme: ‘https’,
hostname:‘en.wikipedia.org’
}
};

How to address this issue

when using in localhost:8100 or any other hostname

image
image1219×1930 371 KB

in actual android

image
image1015×1936 49.4 KB

2

First off, please use proper code blocks so that we can easily read your code - Extended Syntax | Markdown Guide

Second, what are you trying to accomplish? Why are you including Wikipedia in an iframe?

server -> hostname shouldn’t be set to a public hostname. It is recommended to keep it localhost.

3

App is making an api calls. if we use other domain all are failing with CORS error.

4

If you set a local hostname it can’t match a remote hostname you want to reach, local requests go to Capacitor internals and won’t hit the remote server.

Try setting the hostname to some subdomain that don’t exists or you don’t want to reach, in example app.wikipedia.org.

5

Thankyou @julio-ionic @twestrick
I updated my code to use capacitor for http calls.
And updated domain to app.wikipedia.org,
We have already added *.wikipedia.org in CSP frame-ancestors
But I see an error when loading a iframe with wikipedia.org
Blocked a frame with origin https://app.wikipedia.org from accessing a cross-origin frame

6

That looks like a limitation from wikitedia.org itself not allowing to be put in an iframe