How can cross-origin communication between iframes be implemented securely using postMessage in JavaScript?

Cross-origin communication between iframes can be implemented securely using postMessage in JavaScript by ensuring that messages are only accepted from trusted origins and validating the message content to prevent any malicious code execution. This can help prevent cross-site scripting (XSS) attacks and protect sensitive data. 

// Parent frame code
<script>
var iframe = document.getElementById('myIframe');
var targetOrigin = 'https://trusted-origin.com';
var message = 'Hello, iframe!';

iframe.contentWindow.postMessage(message, targetOrigin);

window.addEventListener('message', function(event) {
  if (event.origin !== targetOrigin) return;
  
  // Handle the message received from the iframe
  console.log('Message received from iframe:', event.data);
});
</script>

Keywords

PHP postMessage cross-origin communication iframes security

Related Questions