How to communicate between v3d iframe and other HTML pages?

Hi, When I embed a v3d code in my webflow project and try to host them on our own hosting server (with HTML, CSS, Javascript exported), it throws me an error saying ”
DOMException: Failed to read a named property ‘document’ from ‘Window’: Blocked a frame with origin “https://cdn.soft8soft.com” from accessing a cross-origin frame.”

This seems happens because I am not hosting custom html and javascript files on the verge3d network, but on my own hosting server (like ecommerce platform like shopify), it gives me Same-Origin Policy error. Accrording to Stackoverflow, they suggested a workaround this issue by using window.postMessage and window.eventlistener to avoid this iframe-cross domain access issues.

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

I assume that verge3d’s wordpress plugin encapsulated this approach already in the plugin source code to allow them to be hosted on custom hosting server.

Do we have any guide or step by step approach how to add this workaround in our both sides (one for main page, the other for in the iframe)? Or any other suggestion here?

For your reference, another web-based 3d configurator service called Vectary provides this ModelAPI so that users can easily make them communicate without barrier by adding this code “listenToChangesFromModel(); listenToChangesFromUI();0”

https://help.vectary.com/custom-code

Thanks for your help and techniques in advance.