Cross-domain communication

Cross-domain communication

In normal operation, UI Capture POSTs the captured data to the configured URL using the protocol (for example, http or https), domain (www.website.com), and port of the parent page. This is the preferred method of deployment.

In some cases, it may be required to send the UI Capture POST request to a different server than the parent page. For example, the site may have deployed with a dedicated server to host the target page that has its own subdomain (tealeaf.website.com).

This can be visualized as follows:

cross-domain communications

To perform this type of POST, the website must be configured as follows.

  1. Deploy the following to the cross-domain server.
    • Tealeaf target page.
    • Tealeaf cross-domain JavaScript (tealeaf.frame.js) from the UI Capture package.
    • A minimal html source to include the JS and set the document domain to enable cross-domain communication. An example of the html (xdomainFrame.html) is provided below.
      <source>
      <html>
      <head>
          <script>
              // Ensure document.domain is set to the same domain as the main website page.
              document.domain = "website.com";
          </script>
          <script src="/js/tealeaf.frame.js"></script>
      </head>
      
      <body>
          Target iframe hosted in the sub-domain to which the UIC POST will be made.
      </body>
      </html>
      </source>
      
  2. Add an iframe element to the pages and set the document domain to the subdomain to enable cross-domain communication. Mark the iframe element with a CSS style of display: none so it does not impact the rendered output of the page.
        // Ensure the document domain is set to the sub-domain.
        document.domain = "website.com";
    

    Example of an iframe element added to the main page.

    <source>
        <iframe id="tlXDomainFrame" style="display:none" src="http://tealeaf.website.com/xdomainFrame.html"></iframe>
    </source>
    
  3. Configure the main UI Capture library to set the crossDomainEnabled to true and specify the crossDomainFrameSelector to
    correspond to the hidden iframe added in step 2.

     <source>
    queue: {
        // WARNING: Enabling asynchronous request on unload may result in incomplete or missing data
        asyncReqOnUnload: false,
        useBeacon: false,
        xhrLogging: true,
        queues: [{
                qid: "DEFAULT",
                endpoint: "/TealeafTarget.jsp",
                crossDomainEnabled: true,
                crossDomainFrameSelector: "#tlXDomainFrame",
                maxEvents: 50,
                timerInterval: 300000,
                maxSize: 350000,
                checkEndpoint: false,
                endpointCheckTimeout: 3000
            }
        ]
    }
    </source>
    

Browser limitations

The UIC uses the postMessage API to communicate with the cross-domain iframe. This solution does not work for browsers that do not support the postMessage API.

For more information:
https://caniuse.com/#feat=x-doc-messaging
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin

Join The Discussion

Your email address will not be published. Required fields are marked *