We are loading the Kite connect in angular web application using iframe. It is working as expected in google chrome but throwing an error in Safari browser. Error: SecurityError: Blocked a frame with origin "https://xxxxxxk" from accessing a cross-origin frame. Protocols, domains, and ports must match. Blocked a frame with origin "https://kite.zerodha.com" from accessing a frame with origin "https://xxxxxxx". Protocols, domains, and ports must match.
This error "Blocked a frame with origin from accessing a cross-origin frame" is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get. To fix this issue, ensure that both the parent page and the iframe content are served from the same domain or implement Cross-Origin Communication techniques such as postMessage to safely communicate and exchange data between the two frames.
The window.postMessage() method provides a controlled mechanism to securely circumvent this Same-Origin Policy restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.
targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI.
If you don't have control over the content in the iframe, you won't be able to directly access its elements due to security restrictions.
The window.postMessage() method provides a controlled mechanism to securely circumvent this Same-Origin Policy restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.
postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])
targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string "*" (indicating no preference) or as a URI.
If you don't have control over the content in the iframe, you won't be able to directly access its elements due to security restrictions.