Send event to iframe of different origin from visualforce in lightning

Question

I have a visualforce page where I am displaying an application inside Iframe. To load that application I need to pass a token from visualforce page to it. While sending the same, I am getting error: Uncaught DOMException: Blocked a frame with origin "https://dev-dev--dev--c.visualforce.com" from accessing a cross-origin frame.

Below is the code of visualforce page:

<apex:page lightningStylesheets="true" title="Host"> <!-- Begin Default Content REMOVE THIS -->  <apex:includeScript value="{!$Resource.JQuerymin}"/> <div style="background-color:#c2e5f7;height:100%;width:100%"> <iframe id="toolbar" src="https://test.com/app/" scrolling="true" frameborder="true" height="700px" width="900px"/> </div> <script> j$(document).ready(function() { j$('#toolbar').ready(function() { console.log('Before Send Token'); document.querySelector('#toolbar').contentDocument.dispatchEvent(new CustomEvent('Authenticate', {detail:{ "data":{"token":"Token123","id":"123456"}}})); console.log('After Send Token'); }); }); </script> </apex:page>

Anything I am missing here?

Answer 1

The browsers block scripts trying to access a frame with a different origin. You can communicate between them if you own both the applications by using windows.postMessage and allowing the origin in the event listener. Please refer to the following post for more details.

https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame