search

ourzora / ocs-hackathon-24

Zora Onchain Summer Hackathon 24 Guide
7 stars 0 forks source link

Security Policy Issue While Minting HTML Files: iFrame/Redirection #15

Open aetherWorks-dev opened 2 days ago

aetherWorks-dev commented 2 days ago

The application is deployed on Fleek and hosted on IPFS, working without any problems. Feel free to check it out: https://polished-lab-9007.on.fleek.co/

Our intention is to mint an HTML document that runs the application, either using an iFrame, or redirecting with the meta tag. However, Zora apparently doesn't allow this. When tried to use an iFrame, it refuses to connect. When tried to redirect, it loads the web page with the correct CSS, but the application doesn't run, again due to security restrictions. Here are the two basic approaches we have implemented to test this. See the details below.

And, to provide additional insight, the same approaches work smoothly when minted with Manifold, where the "allow-same-origin" tag is included on the designated encompassing iFrame. You may see it in action: https://gallery.manifold.xyz/sepolia/0x7b96f6b09900ad0358bcd84f91ea114dda4ffbc1/2

Approach 1: iFrame (works on Manifold, doesn't work on Zora)

<!DOCTYPE html>
<html>
<body>
<iframe src="https://polished-lab-9007.on.fleek.co/" title="aetherWorks" width="1280" height="720"></iframe>
</body>
</html>

This HTML file gives the following error message:

DOMException: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

And the mint page looks like this, on the link below:

https://testnet.zora.co/collect/zsep:0x63d6d023e85697ae7d37e4c53a71b77951d62330/1

Ekran görüntüsü 2024-06-28 172059

Approach 2: Redirection (works on Manifold, doesn't work on Zora)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=https://polished-lab-9007.on.fleek.co/">
</head>
</html>

And, this HTML file displays the correct CSS from our application, but doesn't run the application, returning the same error:

DOMException: Failed to read the 'sessionStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

Here is how it looks, and the link:

https://testnet.zora.co/collect/zsep:0x63d6d023e85697ae7d37e4c53a71b77951d62330/3

Ekran görüntüsü 2024-06-28 174941

We want to mint this token on Zora, for reasons of strong esthetic alignment. The question being, what other approaches can we implement to resolve this issue? Are we at the limits of what we can try? What would you recommend?

oveddan commented 1 day ago

I'm not entirely familiar with the rendering code on zora.co for custom html nfts, but I imagine IFrames within them are blocked for security purposes. If iframes were allowed, a malicious actor could display a page with its own web3 (metamask connected) context that could, for example, have a button that looks like a zora mint button, but when someone would click it, it could steal their funds.

oveddan commented 1 day ago

I would suggest bundling an entirely static html site as a folder, making sure there's an index.html in the root of that folder, pinning that folder to ipfs, and setting animation_url on the token metadata to the ipfs url of that folder