minioctt<blockquote><p>[⤴️ <a href="https://octospacc.altervista.org/2024/02/01/emmebi-telegrammico/" rel="nofollow noopener" target="_blank">https://octospacc.altervista.org/2024/02/01/emmebi-telegrammico/</a>]</p><p></p></blockquote><p>L’ultimissimo miglioramento che ho in ogni caso poi fatto ad <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/mbviewer/" target="_blank">#MBViewer</a> è stato l’aggiunta di una funzione per importare codice <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/css/" target="_blank">#CSS</a> e <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/javascript/" target="_blank">#JavaScript</a>, per modificare come i post possono essere visualizzati. Entrambi funzionano allo stesso modo, con i relativi parametri URL che accettano sia <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/url/" target="_blank">#URL</a> esterni che data URI. Niente di particolare per gli stili, semplicemente importo nella pagina la qualunque cosa venga data lì, ma per gli <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/userscripts/" target="_blank">#userscripts</a> è stato leggermente più <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/complicato/" target="_blank">#complicato</a>. 😕️</p><p>Il punto sta nel voler evitare che <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/script/" target="_blank">#script</a> essenzialmente non affidabili siano iniettati nel contesto della pagina semplicemente da URL, perché potrebbero fare tante cosine cattive; prima fra tutte, rubare <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/dati/" target="_blank">#dati</a> dall’archiviazione del <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/browser/" target="_blank">#browser</a> del mio dominio, cosa che è un <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problema/" target="_blank">#problema</a>, perché gli utenti inesperti che aprono la app da <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/link/" target="_blank">#link</a> non andranno a cercare di investigare cosa accade dietro le quinte (e, molto probabilmente, non lo farei realisticamente nemmeno io, seguendo la logica del “<em>i miei siti sono miei e li conosco, sui siti altrui ho le protezioni del browser attive</em>“). E quindi inizio a scendere in un rabbithole… ☠️</p><ul><li>#Iframe? Hmm… non so, non è il caso, sarebbero insicuri, ci sono alcuni modi in cui una pagina in frame può fare robe fastidiose. Non può essere assolutamente un’idea, proprio mai (foreshadowing). 🪟️</li><li>Trovo un bel po’ di <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/librerie/" target="_blank">#librerie</a> vecchie che ricompilano codice <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/js/" target="_blank">#JS</a> per rimuovere pericoli, o lo analizzano preventivamente per la presenza di operazioni dannose così che possa non essere mai eseguito… praticamente tutte abbandonate, qualcuna esplicitamente dichiarata insicura e non patchata, e per qualcun’altra lo possiamo dare per scontato. 🐛️</li><li>Forse questa libreria più recente, <a href="https://github.com/asvd/jailed" rel="nofollow noopener" target="_blank">jailed</a>, che sfrutta un iframe assieme ad un Web Worker per creare una sandbox forte e bloccare tutte le <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/api/" target="_blank">#API</a> eccetto alcune che si decidono… No, l’ho provata e non va bene, non si riescono a passare alla sandbox oggetti complessi, tra cui i costruttori, è impossibile far funzionare API tipo quella del DOM. 🚧️<ul><li>Sarebbe stata un’idea usare qualche reimplementazione del <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/dom/" target="_blank">#DOM</a> per NodeJS tramite browserify, tipo Cheerio, ma farla anche solo girare lì dentro è un altro casino allucinante. 🥴️</li></ul></li><li>WASM tecnicamente è una <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/sandbox/" target="_blank">#sandbox</a> a sua volta, e non accede alle API del browser se non con codice colla, quindi magari… teoricamente ok, ma nella pratica non ho trovato nessuna soluzione già bella e pronta che potessi usare per questo specifico scopo. 🕳️</li><li>La pazzia: PyScript… sarebbe quasi già pronto, ma avrei dovuto comunque modificarlo per bloccare tutte le API insicure (rimuovere <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/codice/" target="_blank">#codice</a>), e poi richiede 15+ MB di dipendenze di runtime… non ideale. 🗿️</li></ul><p>Alla fine ci ho pensato meglio, e sono arrivata alla conclusione che è abbastanza sicuro far girare gli script in un iframe con proprietà <code>src="data:[...]"</code> e <code>sandbox="allow-scripts"</code> (che significa, “blocca tutte le proprietà sensibili eccetto gli script”)… voglio dire, nel visualizzare il contenuto dei siti, già permetto eventuali iframe provenienti dai post, e quelli teoricamente possono già fare quello che vogliono eccetto accedere ai dati della finestra root. Nella pratica, i programmini degli utenti quindi hanno accesso a (quasi) l’intera API JavaScript senza poter fare cose bruttissime. 🎉️</p><p></p>Ecco un esempio di tutto, alla fine: questo URL carica il mio MicroBlog, importa un foglio di <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/stile/" target="_blank">#stile</a> che mette questo font buffo, e uno script che colora le parole dei <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/messaggi/" target="_blank">#messaggi</a> in base a come si ripetono man mano (inutile, ma serve giusto per dare idea delle potenzialità)… <code><a href="https://hub.octt.eu.org/MBViewer/#/siteUrl=https://octospacc.altervista.org|platform=wordpress.org|includeStyle=data:text/css;utf8,@import%20url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');.MbPost{font-family:'Single%20Day',cursive;}|includeScript=data:text/javascript;utf8,function%20MbViewerFunction(data){const%20dom=new%20DOMParser().parseFromString(data.html,'text/html').body;const%20tokens=dom.textContent.split('%20');const%20words={};for(const%20i%20in%20tokens){const%20word%20=%20tokens[i];if(words[word])words[word]++;else%20words[word]=1;tokens[i]=%60%3Cspan%20style='color:${atob('Iw==')}${[0,'b58900','cb4b16','dc322f','d33682','6c71c4','268bd2','2aa198','859900'][words[word]]};'%3E${word}%3C/span%3E%60}data.html=tokens.join('%20').replaceAll('\n\n','%3Cbr%3E');for(const%20img%20of%20dom.querySelectorAll('img'))data.html+=img.outerHTML;MbViewerReturn(data)}" rel="nofollow noopener" target="_blank">https://hub.octt.eu.org/MBViewer/#/siteUrl=https://octospacc.altervista.org|platform=wordpress.org|includeStyle=[...]|includeScript=[...]</a></code> (il link con tutta quella roba messa inline è una stringa di quasi 1 KB!). Userò tutta la cosa per rendere gli hashtag nel testo meno intrusivi per il mio sito anche lì, oltre che sul dominio originale. 👋️<p></p><p>Finisco con dati ancora più tecnici, per chi non ha una vita: con questo <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/design/" target="_blank">#design</a>, ogni <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/userscript/" target="_blank">#userscript</a> deve provvedere ad esporre una funzione che, tramite la Channel Messaging API, viene richiamata dalla <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/app/" target="_blank">#app</a> per ogni messaggio appena questo viene aggiunto al documento visibile; questa funzione riceve dati utili (per ora, solo l’HTML del contenuto; oltre a dati come l’id del messaggio nel flusso, che non sono granché utili all’utente ma devono essere restituiti alla app) e può rimandare nuovi dati indietro richiamando una funzione che è invece l’applicazione ad esporre allo script. Tutto questo ambaradan permetterebbe agli script di effettuare anche operazioni asincrone, comunque, non per forza di dover agire immediatamente alla chiamata. 🤓️</p><p><a href="https://octospacc.altervista.org/2024/02/01/emmebi-javascriptico/" rel="nofollow noopener" target="_blank">https://octospacc.altervista.org/2024/02/01/emmebi-javascriptico/</a></p><p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/api/" target="_blank">#API</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/app/" target="_blank">#app</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/browser/" target="_blank">#browser</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/codice/" target="_blank">#codice</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/complicato/" target="_blank">#complicato</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/css/" target="_blank">#CSS</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/dati/" target="_blank">#dati</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/design/" target="_blank">#design</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/dom/" target="_blank">#DOM</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/javascript/" target="_blank">#JavaScript</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/js/" target="_blank">#JS</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/librerie/" target="_blank">#librerie</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/link/" target="_blank">#link</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/mbviewer/" target="_blank">#MBViewer</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/messaggi/" target="_blank">#messaggi</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/problema/" target="_blank">#problema</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/sandbox/" target="_blank">#sandbox</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/script/" target="_blank">#script</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/stile/" target="_blank">#stile</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/url/" target="_blank">#URL</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/userscript/" target="_blank">#userscript</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://octospacc.altervista.org/tag/userscripts/" target="_blank">#userscripts</a></p>