capacitor-plugin-xframe

Capacitor plugin to bypass CORS & same origin policy for iframe.

Important note

This plugin overrides the shouldInterceptRequest behavior of your webview.

As the core purpose of this plugin, shouldInterceptRequest needs to be leveraged to determine the outgoing requests and eliminate the X-Frame-Options and Content-Security-Policy headers present on the incoming responses for them to work in the embeded iframes.

Supported platforms

• Android

Install

npm install capacitor-plugin-xframe
npx cap sync

Config options

Add these options in either capacitor.config.json or capacitor.config.ts.

userAgent

Customize the outgoing requests' User-Agent header. Useful to modify the resulted responses.

{
  ...
  "plugins": {
    "Xframe": {
      "userAgent": "<your_custom_user_agent>"
    }
  }
}

ignore

A list of domains/URLs to ignore from intercepting.

{
  ...
  "plugins": {
    "Xframe": {
      "ignore": ["google.com", "https://www.facebook.com"]
    }
  }
}

API

• register()
• addListener('onLoad', ...)
• addListener('onError', ...)
• Interfaces
• Type Aliases

register()

register() => Promise<void>

Registers the plugin to your app.

Registering this plugin will override the shouldInterceptRequest behavior of your webview.

addListener('onLoad', ...)

addListener(eventName: 'onLoad', listener: LoadEventListener) => Promise<PluginListenerHandle> & PluginListenerHandle

Listens to requests of document type and returns some useful information.

| Param | Type | | --------------- | --------------------------------------------------------------- | | eventName | 'onLoad' | | listener | LoadEventListener |

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('onError', ...)

addListener(eventName: 'onError', listener: ErrorEventListener) => Promise<PluginListenerHandle> & PluginListenerHandle

Listens to failed requests (of any type)

| Param | Type | | --------------- | ----------------------------------------------------------------- | | eventName | 'onError' | | listener | ErrorEventListener |

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Interfaces

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

LoadEventData

| Prop | Type | | ------------- | ------------------- | | url | string | | title | string | | favicon | string |

ErrorEventData

| Prop | Type | | ---------------- | ------------------- | | url | string | | statusCode | number | | message | string |

Type Aliases

LoadEventListener

(eventData: LoadEventData): void

ErrorEventListener

(eventData: ErrorEventData): void