minioctt<p>Il <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problemino/" target="_blank">#problemino</a> (tra i tanti!) delle <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/webapp/" target="_blank">#webapp</a> è che saranno anche <em>facili</em> da <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/archiviare/" target="_blank">#archiviare</a> o <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/clonare/" target="_blank">#clonare</a> spesso, ma non per questo anche <em>semplici</em>… (o per caso non sono neppure facili e la mia <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/esperienza/" target="_blank">#esperienza</a> mi fa sottovalutare la cosa?) 😫</p><ul><li>🅰️ Per quelle meno complesse, il metodo migliore è senza dubbio un bel <code>wget -kp $URL</code>, cioè scaricare la pagina <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/html/" target="_blank">#HTML</a> con tutte le sue risorse collegate, e convertire i link da assoluti a relativi.</li><li>🅱️ Quel <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/metodo/" target="_blank">#metodo</a> però non è a conoscenza di tutte le risorse caricate dinamicamente, cioè dichiarate in posti diversi dall’HTML. Per prendere anche quelle (ed è spesso necessario, tutte le app moderne caricano roba così), bisogna aprire la app nel <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/browser/" target="_blank">#browser</a>, e guardare le richieste di <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/rete/" target="_blank">#rete</a> che macina con il normale uso.<ul><li>1️⃣ A questo punto, si può usare la funzione del browser per esportare le richieste in formato HAR, e poi tool come har-extractor o Har Extractor Online per ricavare i file effettivi da quel blob.<ul><li>Ho notato però che Firefox in alcune situazioni genera <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/har/" target="_blank">#HAR</a> corrotti (2 giochi fatti in Phaser avevo provato a scaricare, ed una volta estratti gli script tiravano errori; ho riprovato con Chromium, ed è andato tutto liscio), quindi a prescindere io userei <em>l’altro</em> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/navigatore/" target="_blank">#navigatore</a> per questa cosa. 🥴</li><li>Poi, non ho ben capito se per via di come il file HAR in sé è generato, se come quegli <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/strumenti/" target="_blank">#strumenti</a> lo interpretano, o un misto delle cose, ma le risorse cross-domain (e credo anche caricate da iframe?) tendono a non venir estratte, quindi si deve andare poi a pescarle prelevando l’URL di ognuna a manina dai DevTools già aperti… 🤧</li></ul></li></ul></li><li>🆎 Si potrebbero usare primo e secondo metodo insieme in linea di principio (copiando i file del primo passaggio su quelli del secondo, sovrascrivendo gli esistenti), ma nella pratica è inutile… se c’erano link assoluti da convertire in relativi nell’HTML, con spaventosa probabilità questi sono presenti anche nel <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/javascript/" target="_blank">#JavaScript</a> o chissà dove, per cui, dato che bisognerà comunque andare a mano a modificarli da qualche parte, 1 o 2 file in più non cambiano (spesso) nulla.</li><li>2️⃣ Se si è usato il secondo metodo, bisogna a questo punto effettivamente verificare che i link siano tutti corretti, le <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/risorse/" target="_blank">#risorse</a> effettivamente scaricate, e la app funzionante indipendentemente dal dominio originale… il modo più efficiente che ho trovato è aprire già da subito un webserver locale sui file, navigarci nel browser, e controllare sia che tutto funzioni nel pratico, sia che tutte le <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/richieste/" target="_blank">#richieste</a> di rete per risorse effettive (ossia, non contano chiamate di telemetria o simili) vadano al mio <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/server/" target="_blank">#server</a>, anziché al dominio originale (attivando la colonna omonima della tabella nei <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/devtools/" target="_blank">#DevTools</a> lo si vede a colpo d’occhio).<ul><li>Quando ci sono richieste che falliscono o che vanno su altri server, bisogna capire da dove nel codice queste partono, e fare le opportune <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/modifiche/" target="_blank">#modifiche</a> per usare URL relativi. Quelle che partono dall’HTML o dal CSS (turns out, non molte, altrimenti avremmo usato direttamente wget) sono appunto una scemenza da sistemare… ma quando partono da <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/script/" target="_blank">#script</a>, c’è poco da fare, con l’aiuto del debugger del browser (di nuovo, meglio Chromium, perché de-mininifica il JavaScript aggiungendo whitespace in automatico) si va a capire da che punto partono, e in base alla situazione si valuta che modifiche fare al <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/codice/" target="_blank">#codice</a>. Poi, si testa ancora, e ancora si applicano <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/fix/" target="_blank">#fix</a>, finché tutto non funziona. ♻️</li><li>In genere questo non è un problema, e anche per app più ostiche (come quella che ho ricaricato sulla <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/salamuseogames/" target="_blank">#SalaMuseoGames</a> ieri, <a href="https://gamingshitposting.github.io/SalaMuseoGames/2024/04/02/little-alchemy-2/" rel="nofollow noopener noreferrer" target="_blank">Little Alchemy 2</a>) si fa tutto in un quarto d’ora ben ristretto. Tuttavia, bisogna fare attenzione a quei programmi che caricano le risorse man mano che ne hanno bisogno e non tutto subito (in genere, maggior parte dei giochi, oppure parecchie <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/app/" target="_blank">#app</a> React)… lì si può potenzialmente perdere un bel po’ di tempo, perché bisogna mettersi ad usare il <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/software/" target="_blank">#software</a> raggiungendo idealmente il 100% del codice; cioè, cliccare tutti i bottoni, usare qualunque azione, giocare tutti i livelli… fino ad ora non ho mai incontrato <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/ostacoli/" target="_blank">#ostacoli</a>, ma se succede, l’unica è navigare tra il codice già scaricato per vedere cos’è che manca (da qualche parte ci sono scritti i nomi delle risorse ancora da scaricare, per ovvi motivi). 🗡️</li></ul></li><li>🔚 Aggiustamenti finali: in base alla situazione, vanno fatte altre modifiche al source per ovviare a <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problemi/" target="_blank">#problemi</a> banali ma frequenti. La maggior parte riguardano i domini, che in certi casi sono hardcodati, e quindi o ci sono iframe che comunicano con la Messaging API e gli va cambiato il dominio (come per il gioco di ieri), o c’è del DRM che ostacola il <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/rehosting/" target="_blank">#rehosting</a> (come <a href="https://octospacc.altervista.org/2024/04/02/geometrico-nel-brauser/" rel="nofollow noopener noreferrer" target="_blank">il giochino dell’altro ieri</a>) ecc… con <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/pazienza/" target="_blank">#pazienza</a> si risolve tutto.<ul><li>E alla fine di tutto, una cosa che mi piace fare ma che non sarebbe obbligatoria, è disattivare tutte le componenti potenzialmente dannose dell’ <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/applicazione/" target="_blank">#applicazione</a>, ossia commentare via eventuali inclusioni e chiamate a sistemi di analitiche o pubblicità. 🚯</li></ul></li></ul><p><a href="https://octospacc.altervista.org/2024/04/03/webaps-heist/" rel="nofollow noopener noreferrer" target="_blank">https://octospacc.altervista.org/2024/04/03/webaps-heist/</a></p><p><a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/app/" target="_blank">#app</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/applicazione/" target="_blank">#applicazione</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/archiviare/" target="_blank">#archiviare</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/browser/" target="_blank">#browser</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/clonare/" target="_blank">#clonare</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/codice/" target="_blank">#codice</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/devtools/" target="_blank">#DevTools</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/esperienza/" target="_blank">#esperienza</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/fix/" target="_blank">#fix</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/har/" target="_blank">#HAR</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/html/" target="_blank">#HTML</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/javascript/" target="_blank">#JavaScript</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/metodo/" target="_blank">#metodo</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/modifiche/" target="_blank">#modifiche</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/navigatore/" target="_blank">#navigatore</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/ostacoli/" target="_blank">#ostacoli</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/pazienza/" target="_blank">#pazienza</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problemi/" target="_blank">#problemi</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problemino/" target="_blank">#problemino</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/rehosting/" target="_blank">#rehosting</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/rete/" target="_blank">#rete</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/richieste/" target="_blank">#richieste</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/risorse/" target="_blank">#risorse</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/salamuseogames/" target="_blank">#SalaMuseoGames</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/script/" target="_blank">#script</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/server/" target="_blank">#server</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/software/" target="_blank">#software</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/strumenti/" target="_blank">#strumenti</a> <a rel="nofollow noopener noreferrer" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/webapp/" target="_blank">#webapp</a></p>