How can I render 3rd url’s page in HTML DOM directly with customized header in Ionic Capacitor?

[ngdevc]

I used InAppBrowser.openInWebView to open 3rd page with custom headers. And it’s being shown using InAppBrowser. But I want to show the page under an html element directly. In react-native, it’s supported by using WebView tag from react-native-webview. Is this possibel in Ionic capacitor also?

[MILLERMARRU]

You can't set arbitrary request headers on a plain <iframe src> navigation, the browser controls that request and won't let you attach custom headers to it. So this needs to happen in two steps: fetch the page yourself with the headers you need, then render the resulting HTML inline instead of letting an element navigate to the URL directly.

CapacitorHttp is the piece that gets you custom headers without hitting CORS, since the request runs natively rather than through the WebView's own fetch/XHR:

import { CapacitorHttp } from '@capacitor/core'

const response = await CapacitorHttp.get({
  url: 'https://example.com/page',
  headers: { 'X-Custom-Header': 'value' },
  responseType: 'text',
})

const html = response.data

Then render that HTML inline with an <iframe srcdoc={html}> (or a sandboxed container) instead of InAppBrowser. Two things that will bite you once you get this far:

• Relative asset paths (<img src="/logo.png">, relative CSS/JS) resolve against about:srcdoc inside a srcdoc iframe, not the original page's origin, so they'll break unless you inject a <base href="https://example.com/"> tag into the fetched HTML before setting srcdoc.
• Scripts inside srcdoc content don't run unless you explicitly allow them via the sandbox attribute (sandbox="allow-scripts"), and even then they run in a separate, restricted browsing context from your app, no window/document.

If the page needs to keep working as a live, interactive site (not just a static render) and you don't strictly need those custom request headers on every subsequent navigation inside it, InAppBrowser.openInWebView genuinely is the better fit for that, this approach trades that away for control over the initial request.