Problem with blocked a frame with origin

Tagged: blocked, iframe

This topic has 11 replies, 4 voices, and was last updated 1 year, 5 months ago by hello1.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2020-04-23 at 5:27 am #26418

madeinply
Participant

We have come across this problem when working with Shopify:

Page
https://www.madeinply.co.uk/products/custom-plywood-desk-with-solid-sides-test

Error
Uncaught DOMException: Blocked a frame with origin “https://cdn.soft8soft.com” from accessing a cross-origin frame.
at getElement (https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/visual_logic.js:832:27)
at getElements (https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/visual_logic.js:795:20)
at eventHTMLElem (https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/visual_logic.js:843:17)
at Object.PL.init (https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/visual_logic.js:886:1)
at https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/Table.js:86:28
at https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f56b85ffd5/applications/01_table5/v3d.js:1:1149761

Have you any experience of this issue when connecting to e-commerce stores? Can you offer any support?

2020-04-23 at 6:18 am #26428

Yuri Kovelenov
Staff

Hi,

due to security limitations, the iframe content can communicate with the rest of the page only if both documents are served from the same domain.

You might want to deploy your Verge3D app on the same website, rather than on Verge3D Network.

Chief 3D Verger | LinkedIn | Twitter

2020-04-23 at 6:21 am #26429

madeinply
Participant

Thanks for the reply. Our store is hosted with Shopify, they don’t appear to allow you to host any files on the same directory as the website.

Are there any workarounds?

2020-04-23 at 6:29 am #26430

Yuri Kovelenov
Staff

looks like Shopify can handle static files – see this topic for example
https://community.shopify.com/c/Shopify-Design/Seperate-Hosting-for-HTML-CSS-program/m-p/214736/highlight/true#M59550

Chief 3D Verger | LinkedIn | Twitter

2020-04-23 at 7:08 am #26436

madeinply
Participant

Thanks will take a look and pass this onto our developer.

2020-04-23 at 5:01 pm #26481

madeinply
Participant

Our developer has not managed to get that to work.

Was speaking with somebody else who suggested the easiest way is for soft8soft to enable Access-Control-Allow-Origin for you. Is that possible

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

2020-04-24 at 9:40 am #26515

Yuri Kovelenov
Staff

AFAIK, Access-Control-Allow-Origin relates to server side interaction. But as I can see from your error, your Puzzles (converted to JavaScript) just try to
reach the DOM of the parent page.

Still, iframe can communicate with the parent document via messaging
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

You can integrate the JS code which is sending/receiving messages, with puzzles as shown here
https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html

Chief 3D Verger | LinkedIn | Twitter

2020-07-21 at 9:30 pm #30437

dibeholder
Participant

Hey I am getting the same error, and just saw this post with some positive sign, you have managed to get it working, could please let me know how did you do that.

Thanks a lot.

2020-07-22 at 7:02 am #30451

Yuri Kovelenov
Staff

Hi,

please ensure that your 3d app is uploaded and served from the same domain as the rest of the website.

Chief 3D Verger | LinkedIn | Twitter

2020-07-22 at 11:54 pm #30488

dibeholder
Participant

Sadly i dont think that is possible on Shopify, will try using the post message function nd see how it works out.

2020-07-23 at 4:51 am #30491

madeinply
Participant

Hi
Our developers managed to get it working in Shopify.
Get in touch and ill see if I can hep you out.
http://www.madeinply.co.uk

2022-11-16 at 1:22 am #57361

hello1
Participant

Hi @madeinply4u
I am also trying to link a verge 3d to a product page on shopify, would you be able to let me know how you were able to achieve it?

Thank you :)
Author

Posts