but when I run build file in local, it gives me the compileError like this
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: "script-src 'self'"
And npm run build, I checked index.thml file in build file, unsafe-eval is there , same with the above code. but when I run build file , it still gives me the same error. So UseGLTF can’t load the model. I was wondering how I could solve this Content Security Policy for useGLTF. Thanks in advance.
The error above has a different message, and mentions different rules that must be added to your CSP:
style-src 'self' 'unsafe-inline';
In general when adding a CSP, you’ll get a lot of these errors, and you need to read each one to see what is missing.
The later screenshot is of the HTTP Response Headers — if you’re using a <meta /> tag for the CSP then it will not appear in that area, only in the HTML. You can choose whether to specify the CSP with HTTP Response Headers or with a <meta /> tag.
Yes, when I disable Draco and MeshOptDecoder, this indeed work. But, especially in case of an e-commerce that makes it pretty much obsolete without any compression. I am a beginner so might miss something …
These decoders require WebAssembly, and it looks like a CSP will block WebAssembly unless unsafe-eval is enabled. There’s a proposal to improve how CSP handles this but I’m not sure of the status on that proposal.
Finally, the Meshopt library includes a slower plain-JS reference decoder:
It should be possible to use that instead of the WASM decoder. In plain three.js you’d do that with the loader.setMeshoptDecoder( ... ) function, I’m not sure about useGLTF.
This was incredibly helpful. Thank you a lot for your inputs.
As you said, I did implement the apparently slower MeshOptDecoder in plain JS.
I also had to add this line somewhere in my useGLTF hook to use only the JS Draco decoder.
This got rid of the unsafe-eval problem, but introduced a new one related to the CSP:
“Refused to create a worker from ‘blob:’ because it violates the following Content Security Policy directive: “default-src ‘self’ ‘nonce-8472a3a8e8533297d4807fe73f0fda79’ ”. Note that ‘worker-src’ was not explicitly set, so ‘default-src’ is used as a fallback.”
“Refused to create a worker from ‘blob:http://localhost:3000/f5a17f0e-3c0b-4584-a35a-1d310442d4ee’ because it violates the following Content Security Policy directive: “default-src ‘self’ ‘nonce-8472a3a8e8533297d4807fe73f0fda79’ https://cdn.shopify.comhttps://shopify.com”. Note that ‘worker-src’ was not explicitly set, so ‘default-src’ is used as a fallback.”
It is pointing the DRACOLoader.js file which apparently create a worker. (Not sure I understand all of this fully, if any.)
“const worker2 = new Worker(this.workerSourceURL);”
One way to get rid of this is to add: " workerSrc: [‘blob:’] " to the CSP but we are getting back to the risks it introduces when we put this line in the Content Security Policy.
Still fuzzy for me at this point, I’m a bit of a newbie but I am now trying to figure out how to make it work without the " workerSrc: [‘blob:’] " in the CSP.