Loading 3D models / Content Security Policy

[joevingracien]

Hello everyone,

I have this piece of code:

import {Canvas} from '@react-three/fiber';
import {useGLTF} from '@react-three/drei';
import {OrbitControls} from '@react-three/drei';

export default function Homepage() {
  return (
    <div>
      <Canvas>
        <OrbitControls />
        <ambientLight intensity={0.1} />
        <Model />
      </Canvas>
    </div>
  );
}

function Model(props) {
  const {nodes, materials} = useGLTF('/Black.glb');
  return (
    <group {...props} dispose={null}>
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Bottom.geometry}
        material={materials.M_BlaclPlastic}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Glass.geometry}
        material={materials.M_Mirror}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Bulb.geometry}
        material={materials.M_Bulb}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.BulbOuter.geometry}
        material={materials.M_BulbHolder}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Button.geometry}
        material={materials.M_Button}
      />
      <mesh
        castShadow
        receiveShadow
        geometry={nodes.Cylinder004.geometry}
        material={materials.M_BlaclPlastic}
      />
    </group>
  );
}

useGLTF.preload('/Black.glb');

Here is the error message I get:

Uncaught (in promise) CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' 'nonce-1127473604afbb5be4b7ca994055ee65' https://cdn.shopify.com https://shopify.com"
at MeshoptDecoder (index.js:115948:31)
at useGLTF.js:24:71
at index-6662eaf2.esm.js:1643:21
at query (index.js:51:27)
at preload (index.js:70:44)
at useLoader.preload (index-6662eaf2.esm.js:1673:10)
at useGLTF.preload (useGLTF.js:34:89)
at _index-ABCCMMWK.js:99482:9

I am not quite sure how to deal with this, could you please help ?
The model is in the public folder.

[juanpprieto]

Maybe @blittle can help

[blittle]

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 createContentSecurityPolicy within entry.server.tsx:

  createContentSecurityPolicy({
    // pass a custom directive to allow unsafe eval
    scriptSrc: [
      "'self'",
      "'unsafe-eval'",
      'https://cdn.shopify.com',
    ],
  });

[joevingracien]

Thank you very much for taking the time to reply and provide options.
Since 2. seems unsafe, I will try to figure 1. out.

Will post update if I get a safe way working.

If some people want to go the risky way, you'll have to add workerSrc: ["'self'", 'blob:'] in scriptSrc apparently as well.

createContentSecurityPolicy({
    scriptSrc: ["'self'", "'unsafe-eval'", 'https://cdn.shopify.com'],
    workerSrc: ["'self'", 'blob:'],
  });

[netgfx]

I believe the issue is caused by MeshOptDecoder from three-stdlib https://github.com/pmndrs/three-stdlib/blob/main/src/libs/MeshoptDecoder.ts

As it requires and uses WebAssembly and as the error says WebAssembly.instantiate

Which is then used by useLoader (R3F) and useGLTF (drei). I believe it can be toggled of by providing a parameter on the useGLTF hook, otherwise, it should be an easy enough issue to be tackled via PR or your own implementation of useGLTF (just copy it and alter it, it should work)

[max888]

HI @joevingracien were you able to find a solution to this?

I have a very similar issue. Although I cannot even get it to work by altering the Content Security Policy with the above recommended options including workerSrc: ["'self'", 'blob:'],

[joevingracien]

Hi @max888

At the time I went with the unsafe approach since I couldn't get my head around how to do this the safe way.
I tried really quickly this morning and it seems this is not working anymore. I'll dive deeper in the afternoon to make it work.

Also, it would be immensely helpful to get insights on this from the shopify team that built the Winter '24 Shopify Editions website (Hydrogen + Three.js).

[joevingracien]

This seems to work:

  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    scriptSrc: ["'self'", "'unsafe-eval'", 'https://cdn.shopify.com'],
    connectSrc: 'https://www.gstatic.com',
    workerSrc: ["'self'", 'blob:'],
  });

Note that there still are a CSP errors which are apparently not related to this since it happens on newly created hydrogen storefront with mock.shop.

Screenshot from a basic mock.shop starter:

I'd still love to know how the shopify team responsible for Winter '24 Shopify editions handled this.

[max888]

Thank you so much for your fast reply @joevingracien I really appreciate it :)

I needed to add a few more sources to get mine to work. Here is my CSP:

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
    scriptSrc: [
      "'unsafe-eval'", // Seems to work without this but it will produce an error "CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src" ...
      "'self'",
      'https://cdn.shopify.com',
      'https://shopify.com',
      'http://localhost:*', // I needed to specify localhost or my bundled javascript files would not load.
    ],
    connectSrc: [
      "'self'",
      'https://monorail-edge.shopifysvc.com',
      'http://localhost:*',
      '127.0.0.1:*',
      'data:', // I added this as I was getting an error "Refused to connect to 'data:application/octet-stream;base64 ..."
      'blob:',
    ],
  });

I need to add the 'data;' and 'http://localhost:*' as per the comments above.

One thing that I was stumped on was that step 3 of the shopify docs says that adding these values extends the default CSP generated by Hydrogen. But in my case it replaced it.

Therefore I ran the const {nonce, header, NonceProvider} = createContentSecurityPolicy(); to get the default values from the console, then added them to my CSP configuration along with the extra values.

I realise this is the unsafe approach, so I would also love to hear more details from the shopify team (cc @blittle @juanpprieto) about how they might approach this? I can see this becoming very important as more people use 3D models in ecommerce.

Thanks again @joevingracien for your help.

[blittle]

I'll be publishing an RFC hopefully early next week on some changes to our CSP abstraction. I'd love everyone's feedback. In the meantime, there's not much I can recommend other than using unsafe-eval if that's all that the library supports. Often 3p libraries give a way for you to pass a nonce, that nonce being what tells the browser "this is safe to eval". For example, React's renderToReadableStream API generates inline script tags to hydrate as the browser streams content from the server. Each of those inline script tags are blocked, unless they have a nonce.