How to configure the WebApp into a custom webportal iFrame

Products

• CA Spectrum
• CA eHealth

Issue/Introduction

This KB details how to embed the 10.4 WebApp into a custom iFrame web portal.

Environment

Release : 10.4
Release : 10.4.1

Component : Spectrum Core / SpectroSERVER

Cause

Changes were made to 10.4 which don't allow you to put the OneClick WebApp in a custom web portal using just the <embed> tag. 

Resolution

<!-- Need these files in order to get it to work smooth -->

<link rel="stylesheet" href="https://<OCserver>:<webtomcat port>/spectrum/oneclickwebapp/css/style.css">

<script src="https://<OCserver>:<webtomcat port>/spectrum/oneclickwebapp/javascript/webswing-embed.js?version=2.5.10"></script>

 

 

<!--

     How to get webclick on embedded in a different site no matter what domain it is

    

     If you are embedding webswing to page on different domain, you have to enable Cross-origin resource sharing (CORS) by adding the domain in this list. Use * to allow all domains.

     goto https://<OC server>:9443/spectrum/

     set (Spectrum v10.4) Domains Allowed to Embed: * or add your domain

     Individual domains can be added instead to narrow down the CORS control

    

     If you want to change it via the configuration file, go to

     ${spectrum home}/webtomcat/webswing/webswing.config

     "allowedCorsOrigins" : [ "*" ]    

     

     This was added as well

     In the control panel

     under: Launcher Configuration>Main Arguments

     -host {OCserver} -port 8443 -ssl true -contextPort 43000 -compress 9 –cacEnabled true

    

-->    

 

 

<div class="webswing-element" data-webswing-instance="webswingInstance0">

    <div id="loading" class="ws-modal-container">

        <div class="ws-login">

            <div  class="ws-login-content">

                <div class="ws-spinner"><div class="ws-spinner-dot-1"></div> <div class="ws-spinner-dot-2"></div></div>

            </div>

        </div>

    </div>

</div>

 

<script>

    var webswingInstance0 = {

        options: {

            autoStart: true,

            args: getArgs(),

            recording: getParam('recording'),

            binarySocket: getParam('binarySocket'),

            debugPort: getParam('debugPort'),

            recordingPlayback: getParam('recordingPlayback'),

            connectionUrl:'https://<OCserver>:<webtomcat port>/spectrum/oneclickwebapp'

        }

    }

 

    function getArgs()

    {

        var name = "-host < OC DNS host > -port 8443 -ssl true -jsessionid <%= session.getId() %> -user <%= request.getUserPrincipal() != null ? request.getUserPrincipal().getName(): ""%>";

        return name;

    }

    function getParam(name) {

        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

        var results = new RegExp("[\\?&]" + name + "=([^&#]*)").exec(location.href);

        return results == null ? null : decodeURIComponent(results[1]);

    }

</script>

 

<script data-webswing-global-var="webswing">

    (function (window, document) {

        var loader = function () {

            var baseUrl = 'https://<OCserver>:<webtomcat port>/spectrum/oneclickwebapp';

            baseUrl = baseUrl.indexOf("/", baseUrl.length - 1) !== -1 ? baseUrl : (baseUrl + "/");

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == XMLHttpRequest.DONE) {

                    var version = xmlhttp.status == 200 ? xmlhttp.responseText : "undefined";

                    var script = document.createElement("script"),

                        tag = document.getElementsByTagName("script")[0];

                    script.src = baseUrl + "javascript/webswing-embed.js?version=" + version;

                    tag.parentNode.insertBefore(script, tag);

                }

            };

            xmlhttp.open("GET", baseUrl + "rest/version", true);

            xmlhttp.send();

        };

        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);

    })(window, document);

</script>