XFC (Cross-Frame-Container)


This project handles securely embedding web content into a 3rd party domain. Out of the box, it provides several features:

* Clickjacking protection using either a trusted origin or secret
* Automatic iFrame resizing
* Event dispatching from embedded content into a framework

Usage

Include xfc.js in your project.

Ensure process.env.NODE_ENV is set correctly in the build enviornment. Logging is only enabled in non-production environments. The environment can be set in webpack using the DefinePlugin

``js
// webpack.config.js
const webpack = require('webpack');

module.exports = {
/.../
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
`

$3

The consumer is the application which is embedding the 3rd party applications within it.

`js
// Create an app broker to manage embedded apps
XFC.Consumer.init()

// Mount the app at this URL and append its frame to the body element.
var frame = XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/provider.html')
`

If the embedded app does not know which domain to trust, it may require secret authorization.

`js
var frame = XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/provider_b.html', {secret: 'abc123'})
`

To remove and clean up a mounted app, simply call unmount method.

`js
frame.unmount()
`

To load a new page within the existing frame, simply call load method with the new URL.

`js
frame.load(newURL)
`


#### Iframe Resizing Config
By default, the height of iframe will automatically resize based on the height of the embedded content. This behavior can be changed by passing an extra option (resizeConfig) into mount method.

`js
// Pass scrolling as true to resizeConfig to make scrollbar show up.
XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/provider.html', { resizeConfig: { scrolling: true } });
`

resizeConfig is an object that accepts the following attributes.

| name | type | default value | usage |
|:---: |:---: |:---: |--- |
| scrolling | boolean | false | When set to be true, scrollbar may show up on iframe. |
| autoResizeWidth | boolean | false | When set to be true, iframe will autoresize on width instead of on height |
| fixedHeight | string | empty string | If specified (e.g. '200px'), the height will stay at the specified value.

NOTE: setting this attribute will turn off autoresizing.|
| fixedWidth | string | empty string | If specified (e.g. '400px'), the width of iframe will stay at the specified value.

NOTE: setting this attribute will turn off autoresizing. |
| heightCalculationMethod | string | 'bodyOffset' | Accepted values:
'bodyOffset' - use document.body.offsetHeight

'bodyScroll' - use document.body.scrollHeight

'documentElementOffset' - use document.documentElement.offsetHeight

'documentElementScroll' - use document.documentElement.scrollHeight

'max' - max of all of above options.

'min' - min of all of above options.|
| widthCalculationMethod | string | 'scroll' | Accepted values:
'bodyOffset' - use document.body.offsetWidth

'bodyScroll' - use document.body.scrollWidth

'documentElementOffset' - use document.documentElement.offsetWidth

'documentElementScroll' - use document.documentElement.scrollWidth

'scroll' - max of bodyScroll and documentElementScroll

'max' - max of all of above options.

'min' - min of all of above options.|
| customCalculationMethod | function | null | When specified, XFC will use the given method to update iframe's size when necessary (e.g. dom changes, window resized, etc.)

NOTE: context this is provided as iframe to this method, so in the method you can access the iframe by accessing this |
| targetSelectors | string | null | When the embedded page contains elements styled with position: absolute, the iframe resizing logic won't calculate the height of the embedded page correctly because those elements are removed from normal document flow.

In this case, targetSelectors can be used to specify those absolute positioned elements so that they will be taken into consideration when calculating the height of the embedded page. Multiple selectors may be specified by separating them using commas.

If not specified, normal resizing logic will be used.

NOTE: this attribute can be also specified from Provider's side, e.g. XFC.Provider.init({targetSelectors: '#target'})|




$3


Sometimes, it's useful for developers to add more attributes onto mounted iframes. A common use case, for instance, is adding allow attribute to