Import blender .glb into shopify hydrogen gives security policy issue

Questions
1

I am having security policy issues in our shopify hydrogen app, when we use gltf models from blender. They do not show up, even if it is just the default cube exported to glb, and we see a Security Policy issue in the browser.

I have tried just exporting a cube from blender as .glb and still get the issue.
My models are saved in the app under
public/models

Thanks
Lee

2

This is related to Hydrogen content security policy settings.
Probably this discussion may help - Loading 3D models / Content Security Policy · Shopify/hydrogen · Discussion #1313 · GitHub

3

It appears that they took the unsafe solution, and it is related to running a script which I think is the import gltf from babylonjs. I will see if I can work it out but for reference here are the two suggestions which others took the unsafe option for threejs. Also I can get .obj files to load but have to make sure the texture is in the same directory as the model.obj and not path in the .mtl file.
From github post for reference.
Hmmm, it looks like one of those third party libraries is doing an eval to load some JavaScript code. The default Content Security Policy disallows this to protect against cross-site scripting attacks. Your options are:

  1. Figure out which library is doing the eval, and see if there’s a way to pass a nonce to signal the code is okay to execute.
  2. Relax the Content Security Policy to allow eval script execution. Doing so also means your site is susceptible to cross-site scripting attacks. If you choose to do so, pass a custom directive into createContentSecurityPolicywithin entry.server.tsx:
1 Like