Vai al contenuto principale

IPFS per interfacce utente decentralizzate

ipfs
dapp
frontend
Principiante
Ori Pomerantz
29 giugno 2024
4 minuti di lettura

Hai scritto una nuova incredibile applicazione decentralizzata (dapp). Hai persino scritto un'interfaccia utente per essa. Ma ora temi che qualcuno tenti di censurarla abbattendo la tua interfaccia utente, che si trova su un solo server nel cloud. In questo tutorial imparerai come evitare la censura mettendo la tua interfaccia utente sull'interplanetary file system (IPFS) (opens in a new tab) in modo che chiunque sia interessato possa fissarla (pin) su un server per l'accesso futuro.

Potresti usare un servizio di terze parti come Fleek (opens in a new tab) per fare tutto il lavoro. Questo tutorial è per le persone che vogliono fare abbastanza per capire cosa stanno facendo, anche se richiede più lavoro.

Iniziare localmente

Esistono diversi provider IPFS di terze parti (opens in a new tab), ma è meglio iniziare eseguendo IPFS localmente per i test.

  1. Installa l'interfaccia utente di IPFS (opens in a new tab).

  2. Crea una directory con il tuo sito web. Se stai usando Vite (opens in a new tab), usa questo comando:

    pnpm vite build

  3. In IPFS Desktop, fai clic su Import > Folder (Importa > Cartella) e seleziona la directory che hai creato nel passaggio precedente.

  4. Seleziona la cartella appena caricata e fai clic su Rename (Rinomina). Dalle un nome più significativo.

  5. Selezionala di nuovo e fai clic su Share link (Condividi link). Copia l'URL negli appunti. Il link sarà simile a https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Fai clic su Status (Stato). Espandi la scheda Advanced (Avanzate) per vedere l'indirizzo del gateway. Ad esempio, sul mio sistema l'indirizzo è http://127.0.0.1:8080.

  7. Combina il percorso del passaggio del link con l'indirizzo del gateway per trovare il tuo indirizzo. Ad esempio, per l'esempio precedente, l'URL è http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Apri quell'URL in un browser per vedere il tuo sito.

Caricamento

Quindi ora puoi usare IPFS per servire file localmente, il che non è molto entusiasmante. Il passaggio successivo è renderli disponibili al mondo quando sei offline.

Esistono diversi servizi di pinning (opens in a new tab) ben noti. Scegline uno. Qualunque servizio tu usi, devi creare un account e fornirgli il content identifier (CID) (identificatore del contenuto) nel tuo IPFS desktop.

Personalmente, ho trovato 4EVERLAND (opens in a new tab) il più facile da usare. Ecco le istruzioni per farlo:

  1. Vai alla dashboard (opens in a new tab) e accedi con il tuo portafoglio.

  2. Nella barra laterale sinistra fai clic su Storage > 4EVER Pin.

  3. Fai clic su Upload > Selected CID. Dai un nome al tuo contenuto e fornisci il CID da IPFS desktop. Attualmente un CID è una stringa che inizia con Qm seguita da 44 lettere e cifre che rappresentano un hash codificato in base-58 (opens in a new tab), come QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, ma è probabile che questo cambi (opens in a new tab).

  4. Lo stato iniziale è Queued (In coda). Ricarica finché non cambia in Pinned (Fissato).

  5. Fai clic sul tuo CID per ottenere il link. Puoi vedere la mia applicazione qui (opens in a new tab).

  6. Potresti dover attivare il tuo account per averlo fissato per più di un mese. L'attivazione dell'account costa circa 1 $. Se l'hai chiuso, esci e accedi di nuovo per farti chiedere nuovamente l'attivazione.

Utilizzo da IPFS

A questo punto hai un link a un gateway centralizzato che serve il tuo contenuto IPFS. In breve, la tua interfaccia utente potrebbe essere un po' più sicura ma non è ancora resistente alla censura. Per una vera resistenza alla censura, gli utenti devono usare IPFS direttamente da un browser (opens in a new tab).

Una volta installato (e con IPFS desktop funzionante), puoi andare su /ipfs/<CID> (opens in a new tab) su qualsiasi sito e otterrai quel contenuto, servito in modo decentralizzato.

Svantaggi

Non puoi eliminare in modo affidabile i file IPFS, quindi finché stai modificando la tua interfaccia utente, è probabilmente meglio lasciarla centralizzata o usare l'interplanetary name system (IPNS) (opens in a new tab), un sistema che fornisce mutabilità sopra IPFS. Naturalmente, tutto ciò che è mutabile può essere censurato, nel caso di IPNS facendo pressione sulla persona con la chiave privata a cui corrisponde.

Inoltre, alcuni pacchetti hanno problemi con IPFS, quindi se il tuo sito web è molto complicato potrebbe non essere una buona soluzione. E naturalmente, tutto ciò che si basa sull'integrazione del server non può essere decentralizzato solo avendo il lato client su IPFS.

Rintracciabilità tramite ENS

Se punti un nome ENS (come vitalik.eth) al tuo sito web, sarà considerato una pagina web completamente decentralizzata e verrà automaticamente fissato dal servizio dweb3.wtf (opens in a new tab), oltre a essere reso ricercabile attraverso il motore di ricerca web3compass.net (opens in a new tab), in modo molto simile a quanto fanno DuckDuckGo, Brave Search o Google per il web tradizionale.

Conclusione

Proprio come Ethereum ti consente di decentralizzare il database e gli aspetti della logica di business della tua dapp, IPFS ti consente di decentralizzare l'interfaccia utente. Questo ti permette di chiudere un ulteriore vettore di attacco contro la tua dapp.

Vedi qui per altri miei lavori (opens in a new tab).