iFrame embedding, not loading: CORS error

Grasshopper ShapeDiver
#1

Hi there,

Username: moondoor
I’m on a designer plan, trying to embed a private model ShapeDiver - Online Parametric 3D Configurator
Trying to embed this model on a login part of my website: https://moondoor.nl/Moondoor/Moondoor-test-environment/ (let me know if accessing this site is vital in order to help me, but see image below in the meantime)

  • Using a website-builder (Strato.nl)
  • whitelisted both moondoor.nl and www.moondoor.nl
  • iFrame script I used:

id=“sdv-iframe” width=“100%” height=“800” src=“ShapeDiver Viewer v2” referrerpolicy=“origin” allowfullscreen scrolling=“no” style=“overflow-x: hidden; overflow-y: hidden; border-width: 0;”>

Your browser does not support iframes.

(I deleted the ‘’<iframe’’ and ‘’’’ cause it appears to load an iFrame here)

CSS-type: none

When loading the page, I’m getting 4 CORS errors.
I followed your example on https://support.shapediver.com/hc/en-us/articles/360020861952 for whitelisting website-building services, but in my headers, the ‘‘x-shapediver-orgin’’ turn up empty.

image
image1915×989 99.1 KB

As the image clarifies, ‘‘To fix this issue, ensure the response to the CORS request and/or the associated preflight request are not missing headers and use valid header values.’’

But it is beyond me how to do it. Can you please help?

Best, Thomas

#2

Hi @moondoor, could you provide access to your application please? Will be much easier to track down then. Just send a private message to me. Thanks, Alex

#3

Hi Alex,

I sent you a message, let me know if you recieved it well and whether the acces I provided works?

Best Thomas

#4

Status update: I found half of the solution.

After making my model public, and putting the iFrame on a publicly accessible page of my website, the iFrame said something like: ‘‘could not make connection with [enter the actual domain (website builder) that tries to make contact]’’
I pasted that into my global domains and now it makes the connection and shows the configurator.
Also this worked with a private model. I am trying to figure out now how to make a connection on a non-public page of my website.

#5

Hi @moondoor, there shouldn’t be any difference in terms of ShapeDiver embedding checking between “public” and “private” pages on your website (unless you are using different hostnames for embedding). Please note that the check is done precisely. If you embed from www.yourdomain.com you must allow precisely www.yourdomain.com. If you want to allow both yourdomain.com and www.yourdomain.com, you have to add both to the list.

#6

Hi Alex, I sent you an invite at alex@shapediver.com

Hope to hear from you. Best, Thomas

#7

Many thanks for providing the credentials. The problem turns out to be the sandbox attribute of one of the iframes you are using to embed our viewer. Please read this: <iframe>: The Inline Frame element - HTML: HyperText Markup Language | MDN
Probably you will have to allow at least this:

  • allow-scripts
  • allow-same-origin

or just remove the sandbox attribute completely.