Methods for Inter-site Communication (using JavaScript or other options?)

Other Questions JavaScript
1

I’m facing a challenge: I need to establish communication between two separate websites while seeking a straightforward approach. Presently, JavaScript is in use, but there are cumbersome workarounds due to cross-origin scripting limitations.

Right now, site A opens a modal displaying site B via a jQuery plugin known as jqModal. After completing its tasks, site B sends back results to site A through a workaround involving creating an iframe that points to a page on site A, embedding information in fragment identifiers. Site A then polls this iframe to retrieve the information. While this is a commonly used method, it feels quite unorthodox.

Alternatives like CrossSite exist, and posting data from site B to site A via HTTP POST might be an option, but I want to prevent any page reloads.

Can anyone suggest other viable solutions?

EDIT: I prefer not to store any state on site B.

2

Hey ClimbingLion,

For smoother inter-site communication without reloads, consider using HTML5’s Web Messaging API. This allows windows on different origins to communicate using the postMessage method. It’s straightforward and effective.

Example:
siteB: Send message

window.parent.postMessage(‘yourData’, ‘http://siteA.com’);

siteA: Listen and handle message
window.addEventListener(‘message’, function(event) { 
  if (event.origin === ‘http://siteB.com’) {
    // Handle the received data
    console.log(event.data);
  }
});

Ensure both sites handle messages securely by checking the origin.

Hope this helps!

3

For an additional perspective on your inter-site communication challenge, consider utilizing CORS-enabled HTTP requests as an alternative solution. By configuring Cross-Origin Resource Sharing (CORS), you can securely allow web pages hosted on site B to send requests to site A without page reloads. This method can be particularly effective when paired with AJAX requests for a seamless experience.

Implementation Details:

  1. Configure CORS on Site A:

    • Ensure the server hosting site A allows requests from site B by setting appropriate headers.
    • Example of a CORS header in Apache configuration:
    Header set Access-Control-Allow-Origin "http://siteB.com"

  2. AJAX Request from Site B:

    • Utilize JavaScript to send data from site B directly to site A.
    fetch('http://siteA.com/yourEndpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ yourData: 'data-to-send' })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

  3. Server-side Handling on Site A:

    • On site A, set up an endpoint to handle the incoming data and respond appropriately without necessitating a page refresh.

Considerations:

  • Make sure both sites establish trusted communication to prevent security vulnerabilities.
  • Depending on your server configuration, you might need to adjust CORS headers to allow specific methods (e.g., POST) and headers.

This approach aims to simplify the communication process, leveraging native browser capabilities while maintaining a seamless user experience. Feel free to analyze how it aligns with your project’s requirements and security standards.