Using the Citrix micro VPN plug-in for Cordova

The Citrix micro VPN plug-in for Cordova provides the ability to securely use APIs such as WebView, In-App Browser, and Fetch.

• Cordova WebView - This is the main Web View of the Cordova app.
• InAppBrowser - This is the cordova-plugin-inappbrowser plug-in that is used to view webpages without leaving your app.
• Fetch - This is used for fetching data using the micro VPN tunnel.

Further, since WebView is enabled for tunneling, the plug-in allows the use of iframe elements and even provides the ability to make AJAX calls.

Check if the MVPN SDK is detected

In your onDeviceReady method, add the following check to detect if micro VPN is available. If it is available, assign the existing Cordova actions to use the micro VPN version of the variable. For example, if you are using cordova.InAppBrowser.open to open an In-App Browser, you can either use the micro VPN version of that action - mvpn.InAppBrowser.open - or directly assign: cordova.InAppBrowser.open = mvpn.InAppBrowser.open in your onDeviceReady function. The same is applicable for cordovaFetch. You can either use mvpnFetch throughout or assign: cordovaFetch = mvpnFetch.

Note: The following javascript snippet is from the file index.js.

onDeviceReady: function() {
    this.receivedEvent('deviceready');
    if (this.mvpnAvailable()) { // Check to see if the MVPN SDK is available and is correctly set up
        cordova.InAppBrowser.open = mvpn.InAppBrowser.open; // If you are using InAppBrowser
        cordovaFetch = mvpnFetch; // Enhanced version cordova-plugin-fetch
    }
},

mvpnAvailable: function() {
    try {
        let tmp = mvpn;
        tmp = mvpnFetch; // Throws an exception if MVPN SDK is not detected.
        console.log('MVPN SDK detected.');
        return true;
    } catch (e) {
        console.error('No MVPN SDK');
        return false;
    }
}
<!--NeedCopy-->

In-App Browser

The Citrix micro VPN plug-in for Cordova already has support for In-App Browser. The code is based on the existing Apache plug-in called cordova-plugin-inappbrowser. You would see a conflict/compilation error if both plug-ins exist. Therefore, if your project already uses cordova-plugin-inappbrowser, you would need to uninstall this plug-in using the following command:

cordova plugin rm cordova-plugin-inappbrowser

Note: If you want to uninstall cordova-plugin-inappbrowser for a specific platform, you can use Apache Cordova Plugman to do so.

The usage of In-App Browser is straightforward and is shown in the following example. For more details, see cordova-plugin-inappbrowser

In the following example, we use mvpn.InAppBrowser.open to load the page citrix.com, with the click of a button with the id loadCitrixButton:

Note: The following javascript snippet is from the file index.js. The HTML counterpart of the code from the file index.html is not shown.

onDeviceReady: function() {
    this.receivedEvent('deviceready');
    if (this.mvpnAvailable()) {
        this.TestButton();
    }
}
 
TestButton: function() {
    let loadCitrixButton = document.getElementById('loadCitrixButton');
    loadCitrixButton.addEventListener('click', loadCitrix);
},
 
function loadInAppBrowser(url) {
    console.log('click! loading ' + url);
    if (mvpn) {
        let ref = mvpn.InAppBrowser.open(url, target, options);
        ref.addEventListener('loadstart', event => { console.log('Load started: ' + event); });
        ref.addEventListener('loadstop', event => { console.log('Load stopped: ' + event); });
        ref.addEventListener('loaderror', event => { console.log('Load error: ' + event); });
        ref.addEventListener('exit', _ignored => { console.log('Browser closed'); });
    } else {
        console.log('cordova-cemapp plug-in not installed.');
    }
}
 
const loadCitrix = function() { loadInAppBrowser('https://www.citrix.com'); }
<!--NeedCopy-->

iframe elements

If the environment for the Citrix micro VPN plug-in for Cordova is set up correctly, iframe elements can be created with no additional steps. Since the WebView is enabled for tunneling, by default iframes are also tunneled. However, with the advent of Cross-Origin Resource Sharing(CORS), many sites have blocked support for iframes.

To check if a website supports iframes, ensure that the HTTP response header X-Frame-Options does not have the values SAMEORIGIN or DENY. If the header does not exist or has a different value, the website can be loaded in an iframe.

You can use the inspect feature on your browser to check the HTTP response headers. The following example shows facebook.com’s HTTP response header X-Frame-Options with the value DENY. This means that facebook.com cannot be loaded in an iframe.

In the following example, we show a function loadiFrame which appends an iframe element to the div with id testBase. The iframe element loads the page https://wikipedia.org.

Note: The following javascript snippet is from the index.js file. The HTML counterpart of the code from the index.html file is not shown.

loadiFrame: function() {
    let parentElement = document.getElementById('testBase');
    let iframe = document.createElement('iframe');
    iframe.src = 'https://wikipedia.org';
    iframe.height = '25%'
    iframe.width = '90%'
    parentElement.appendChild(iframe);
}
<!--NeedCopy-->

AJAX calls

The Citrix micro VPN plug-in for Cordova enables Cordova WebView for tunneling as long as the request remains within the same process. This is applicable for JQuery AJAX requests that are initiated from the same Cordova WebView (JS/HTML).

In the following example, we demonstrate how to make a simple GET request using jQuery AJAX.

Note: The following javascript snippet is from the index.js file.

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        $("button").click(function(){
            $.ajax({
                  url : 'https://api.weather.gov/',
                  type : 'GET',
                  dataType:'json',
                  success : function(data) {
                      alert('Data: '+data);
                      $("#div1").html(JSON.stringify(data));
                  },
                  error : function(request,error) {
                      alert("Request: "+JSON.stringify(request));
                  }
              });
          });
   },
};
app.initialize();
<!--NeedCopy-->

Note: The following HTML snippet is from the index.html file.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>Cordova Plugin CEM MVPN Test App</title>
</head>
<body style="text-align:center;">
    <br>
    <div id="div1"><h2>jQuery AJAX Change This Text</h2></div>
    <button>Click Here</button>
</body>
</html>
<!--NeedCopy-->

mvpnFetch

Similar to In-App Browser, the Citrix micro VPN plug-in for Cordova already has support to make Fetch requests. mvpnFetch is based on the existing Apache plug-in called cordova-plugin-fetch.

In the following example, we demonstrate how to use mvpnFetch to make a request:

Note: The following javascript snippet belongs in the index.js file. The HTML counterpart of the code in the index.html file is not shown.

testFetch: function() {
    let parentElement = document.getElementById('testFetch');
 
    mvpnFetch('https://www.googleapis.com/customsearch/v1')
        .then(response => {
            console.log('received response from testweb');
            return response.json();
        })
        .catch(err => {
            console.log('error getting json from response: ' + err);
        })
        .then(json => {
            console.log('received json: ' + json);
        })
},
<!--NeedCopy-->