SyferLock Help Center

Displaying the GridGuard grid in an IFrame

One way to display a grid on a custom web page is to embed it within an IFrame. This is a complicated process because the GridGuard™ web page (content of the IFrame) is served by a different server (the GridGuard™ server) than the server used to serve the parent page (the custom web page web server). Cross site scripting restrictions in browsers make communication between the IFrame and the parent frame difficult, especially in older browsers that do not support the concept of messaging.

To address this issue, we make use of the javascript porthole library (http://ternarylabs.github.com/porthole/) for cross-domain IFrame communication. This will allow the parent form to obtain the gridID that needs to be submitted along with the username, realm, and GridCode™ to authenticate the user. These instructions are valid for IE7-9, FF & Chrome.

Assumptions

  1. ggva.company.com - GridGuard Server
  2. web.company.com - Web site hosting custom login page
  3. XXXX - name of the GridGuard Realm

GridGuard Server Changes

1. Download an unzip the attached zip file. It contains samples and javascript files you will need.
2. Copy directory gridguard/porthole from zip file to /opt/syferlock/gridserver/webapps/gridguard
3. chown -r root:gridserver /opt/syferlock/gridserver/webapps/gridguard/porthole
4. chmod 750 /opt/syferlock/gridserver/webapps/gridguard/porthole
5. chmod 640 /opt/syferlock/gridserver/webapps/gridguard/porthole/*
6. Copy file gridguard/css/embed.css from zip file to /opt/syferlock/gridserver/webapps/gridguard/css
7. chmod 640 /opt/syferlock/gridserver/webapps/gridguard/css/embed.css
8. chown root:gridserver /opt/syferlock/gridserver/webapps/gridguard/css/embed.css
9. Modify the head section of file /opt/syferlock/gridserver/webapps/gridguard/default.jsp file as shown below: to
   Sample modified file is available in zip file. 
   <% if(grid.getRealm().equals("XXXX")) { %>
    <link href="css/embed.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://web.company.com/porthole/porthole.min.js"></script>
    <script type="text/javascript">
        var windowProxy;
        function loadProxy() {
            windowProxy = new Porthole.WindowProxy('https://web.company.com/porthole/proxy.html'); 
            var t=setTimeout("postMsg()",2000);
        }
        function postMsg() {
            windowProxy.postMessage('<%= grid.gridID %>');
        }
    </script>
   <% } %>
10. Modify the body tags to ensure that the loadProxy() method is also invoked. 
    Make a similar change for all body tags.
    <body id="gridbody" class='<c:out value="${gridResult.gridClass}"/>' onload="loadProxy();">
11. Edit file /etc/httpd/conf.d/00_ssl.conf to add a header to all responses to include the P3P response header. 
    This entry should be located just above the JkMount entry in the file. Sample modified file attached.
    <Location /gridguard/>
      Header set P3P "CP='IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT'"
    </Location>

Web Server Changes

1. Copy directory gridguard/porthole from zip file to the document root of the website. 
   If you put it in any other location, adjust paths accordingly. 
2. Modify the custom login page to add the following elements to the head section. Sample file (main.html) attached.
   <script type="text/javascript" src="https://ggva.company.com/gridguard/porthole/porthole.min.js"></script>
   <script type="text/javascript">
     function onMessage(messageEvent) {
       document.forms['logonForm'].elements['gridID'].value = messageEvent.data;
     }
     var windowProxy;
     window.onload = function() {
       windowProxy = new Porthole.WindowProxy('https://ggva.company.com/gridguard/porthole/proxy.html', 'gridFrame');
       windowProxy.addListener(onMessage);
     }
   </script> 
3. Create a form field name gridID in the login form; set default value to -1.
4. Include an IFrame in the main page to display the grid. 
   The name/id of the frame should be the same referenced in step 6.
   <iframe name="gridFrame" id="gridFrame" width="800px" height="700px"></iframe>

To validate GridCode™, submit an authenticate GridGuard Rest API with the username, gridID and gridcode fields from the custom page. If the call succeeds (http return code of 200), then the submitted gridcode is accurate, user has been authenticated and the application can now proceed to log the user in as required.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk