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.
    • IBM Tealeaf target page.
    • Tealeaf cross-domain JavaScript 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.
      <!DOCTYPE html>
      <html>
      <head>
          
              // Ensure the document domain is set to the sub-domain.
              document.domain = "website.com";
          
          
      </head>
      <body>
      
      </body>
      </html>
  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";
    
  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.

Join The Discussion

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