search

hicetnunc2000 / hicetnunc

hicetnunc UI/UX
http://hicetnunc.xyz
800 stars 282 forks source link

interactive NFT not loading is iOS and safari #718

Open frading opened 3 years ago

frading commented 3 years ago

Describe the bug One of my NFTs ( https://www.hicetnunc.xyz/objkt/87949 ) fails to load on:

But it loads fine on any browser, included the ones mentioned above, when tested:

So my current understanding is that hicetnunc's security rules are preventing it to work on the browsers mentioned above. I suspect that since I load a glb file that is compressed with Draco, and that the Draco loader creates a blob, this blob is blocked by the security rules. What surprises me is that ths only happens on some OS or browsers.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://www.hicetnunc.xyz/objkt/87949 using safari on mac
  2. You should see a green progress bar that never disappear
  3. If you open the Web inspector/developer console, you should see the following error messages:

[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'. [Error] Unrecognized Content-Security-Policy directive 'worker-src'. [Error] Refused to load blob:https://bafybeihpmrqmlsww44bnwznmxz4mftvu44tmm4i6jkigj54mp3uudkkaty.ipfs.infura-ipfs.io/5e51595a-0287-4222-912b-88b410ea484e because it does not appear in the child-src directive of the Content Security Policy. [Error] Unhandled Promise Rejection: SecurityError: The operation is insecure. (anonymous function) (jsmodulesDRACOLoader.js:1:43744)

Expected behavior The progress bar should disappear and the 3D model should become visible.

Screenshots Here is a video showing how it loads correctly on desktop:

https://user-images.githubusercontent.com/59701/118889046-6f135100-b8f4-11eb-8121-9eb1f8a95426.mp4

Here is a video showing how it does not load on safari:

https://user-images.githubusercontent.com/59701/118889106-8b16f280-b8f4-11eb-88fb-a6946c71dcb1.mov

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context This could be similar to the following issue: https://github.com/hicetnunc2000/hicetnunc/issues/469

andrevenancio commented 3 years ago

Hey @frading From within the OBJKT detail page if you scroll down you see something saying IPFS. If you click on it, you jump over to the IPFS directory hosting your files.

Your interactive NFT does not work there either. And that's the direct link to it, so any iframe sandbox contrains do NOT apply there. There might be a IPFS contrain which I suspect is out of our control. Am I right @skenaja ?

frading commented 3 years ago

Thanks a lot for looking into it and the clarification @andrevenancio . I did not realise files were hosted on a third party. I'm not sure what an IPFS contrain is, though, is that something that can be controlled when uploading the zip file, or in any other way? Feel free to forward me to some docs, I'm happy to run tests. A quick google search led me to https://discuss.ipfs.io/, but I could not find mentions of similar errors in this forum.

At the moment, I'm assuming that the problem only happens because of the glb draco compression, so I'll try without it on my next mint. But that means the glb will go from 500k to 30M, which is a huge increase. It would be great if there was a way around.

andrevenancio commented 3 years ago

IPFS is a network of decentralised nodes. Its there the assets get stored. In theory they should run without any restriction like your netlify app runs. You're right. it might have to due with Drako and how it works. I'm not sure if its the webworker that gets rejected or not. Lets see what Skenaja comes up with. he normally have really good insights.