IFrame Integration

The partner's web application is embedded in the 365FarmNet portal through an iframe.

Transport layer security

Due to Mixed Content Blocking by all major browsers the embedded web application must be available over HTTPS. This also improves transport security and avoids browser warnings for our customers.

Base URL

The iframe is accessible via the following static application route:

https://<ENV>.365farmnet.com/365FarmNet/dist/index.html#/connect/<PARTNER_KEY>

Key	Description
ENV	app, preprod or development environment such as devcon
PARTNER_KEY	key of your application such as myapplication

Cookies

Since the embedded application is hosted by the partner at a domain not matching *.365farmnet.com cookies might be refused by several browsers.

You must avoid using cookies for session tracking or other reasons for they might not be accepted by the clients as they are classified as third-party cookies. Encode values as URL Session parameters instead.

Additional Limitations

As mentioned above customers may disallow third-party cookies and may use plugins to block certain content. Browser vendors handle these cases differently and due to security reasons browser APIs like LocalStorage or IndexedDB might not be available to your web application. If your application relies on these technologies make sure to check availability before using them and provide a fallback or some feedback to the customer.

Browser Support

In order to allow our customers using a diverse set of browsers the following browsers and versions are the officially supported ones in the 365FarmNet portal. Your web application should support these as well and give feedback to the customer in the event a certain browser version can not be supported.

Desktop:

• Chrome: current version
• Firefox: current version
• MS Edge: current version
• Internet Explorer: Version >=11
• Safari: current version

Mobile/Tablet:

• Chrome mobile: current version
• Safari mobile: current version

Cross-origin communication

To allow partner applications providing a smoother integration into our platform we promote using the window.postMessage() method in your JavaScript which allows embedded pages to communicate with the embedding page. Currently the following message is supported:

Set height of the iframe

In your application you can set our iframe's height (px) by:

    window.parent.postMessage({type: 'height', payload: {value: '<your_height_here>'}}, '*');

This way you can easily provide a responsive iframe experience for your customers in 365FarmNet. The following JavaScript snippet is a working example you can use in your HTML to setup a proper height of your partner integration:

    var app = {};
    // determine requestAnimFrame in a cross-browser safe way
    app.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    app.windowHeight = 0; // the latest height
    app.htmlElement = document.getElementsByTagName('html')[0];

    // listen for browser resizes and communicate preferred/new height to parent
    app.resizeFrame = function () {
        // safely calculate new height
        var windowHeight = document.body ? Math.max(document.body.offsetHeight, app.htmlElement.offsetHeight) : app.htmlElement.offsetHeight;
        if (app.windowHeight === windowHeight) {
            app.requestAnimFrame.call(window, app.resizeFrame);
            return false;
        }
        app.windowHeight = windowHeight;
        window.parent.postMessage({type: 'height', payload: {value: windowHeight}}, '*');
        app.requestAnimFrame.call(window, app.resizeFrame);
    };
    app.requestAnimFrame.call(window, app.resizeFrame);