La bellezza delle espressioni regolari (aka: correggendo bgcolor in Wikipedia)

Non so se l’avessi già detto ma amo perdere una consistente quantità di tempo su Wikipedia in lingua italiana. Appena posso lo faccio. È rilassante e stimolante. Ritaglio del tempo soprattutto per svolgere i task più inutili che mi auto-assegno con gioia per sentirmi in pace con me stesso nello sfuggire agli impegni più seri.

Oggi mi sono imbattuto ad esempio in una voce Wikipedia che aveva una semplice tabella con uno sfondo colorato. Colorata con bgcolor.

Non è che tutti dovrebbero sapere che l’HTML si è evoluto giusto un briciolo dalla sua nascita e che roba come bgcolor non si dovrebbe più usare almeno da HTML 4 ovvero almeno dal 1999. Diciamoci la verità, l’ho sempre sospettato, ma manco io avevo la certezza che fosse un attributo deprecato prima di scoprire che la voce [[HTML 4]] non aveva fonti e prima di giungere quindi alle specifiche W3C per pura serendipità. asd

In sostanza, facendo una rapida ricerca, circa un migliaio e mezzo di articoli di Wikipedia ad oggi usavano ancora bgcolor.

Ora, è chiaro che se quasi 1500 voci di Wikipedia hanno una tabella colorata con bgcolor e se ogni browser del pianeta (tranne Internet Exploder) mostra correttamente questo colore, significa che non c’è proprio nessuna fretta a correggerlo. Certo però che un giorno questa migrazione sarà da fare. Un giorno.

Ora sapete il perché ciò mi abbia allettato.

In teoria una sostituzione del genere appare piuttosto semplice. In fondo bisogna solo trovare nel testo della pagina tutto ciò che assomigli a questo:

<td bgcolor="#ff0000"></td>

E trasformarlo in questo:

<td style="background:#ff0000"></td>

Ma i casi da tenere in considerazione sono almeno questi:

<td bgcolor="#ff0000"></td>
<td bgcolor="#f00"></td>
<td bgcolor="ff0000"></td>
<td bgcolor=ff0000></td>
<td bgcolor="f00"></td>
<td bgcolor  = "red"></td>

Senda dimenticare che una becera sostituzione potrebbe provocare attributi style doppi ove ve ne fosse già uno:

<td bgcolor="red"     colspan="2" style="color:blue;">
↓
<td style="color:red" colspan="2" style="color:blue;">

Tagliando corto dopo un’oretta buona ecco qui una casseruola di espressioni regolari che lanciate in sequenza effettuano la corretta conversione di parecchi di questi casi:

1. Una prima sostituzione di tutti i vari colori esadecimali scritti ahimè senza cancelletto davanti tipo bgcolor="ff0000" e che il bot non deve confondere con bgcolor="red" o altri nomi propri che non vogliono il cancelletto davanti:

# Ricerca:
/bgcolor *= *("?)([a-fA-F0-9]{6}|[a-fA-F0-9]{3})+\1/
 
# Sostituzione:
style="background:#$2"

Notare l’utilità dell’operatore \1 nella ricerca per riferirsi al primo apice che può esserci o meno.

2. Segue una sostituzione di tutti i vari colori esadecimali con cancelletto davanti e quelli dal nome specifico:

# Ricerca
/bgcolor *= *("?)(#[a-z0-9A-Z]{6}|#[a-zA-Z0-9]{3}|[a-zA-Z]{3,})+\1/
 
# Sostituzione
style="background:$2"

3. Per sfizio a questo punto uno potrebbe anche decidere di accorciare tutti i colori dal formato #aabbcc a #abc:

# Ricerca
/#([a-fA-F0-9])\1([a-fA-F0-9])\2([a-fA-F0-9])\3"/
 
# Sostituzione
#$1$2$3"

Notare sempre l’uso dell’operatore \1, \2, \3 per dire che un gruppo sarà ripetuto un’altra volta subito dopo.

4. A questo punto ci si potrebbe ritrovare con un tag HTML con due style come in questa situazione, e che dovranno essere uniti in qualche modo:

<td bgcolor="red"                colspan="2" style="color:blue;"></td>
↓
<td style="background-color:red" colspan="2" style="color:blue;"></td>

E quindi si lancia un’altra espressione regolare per unire tutti gli style presenti nello stesso tag (questa è tenera asd):

# Ricerca
/style="([a-zA-Z0-9-; #:%]+?);?"((?: +[a-zA-Z]+ *= *("?)[a-zA-Z0-9-; #:%]+\3)*) style="([a-zA-Z0-9-; #:%]+?);?"/
 
# Sostituzione
style="$1; $4"$2

Notare il doppio-gruppo innestato (?:()*) in mezzo ai due style. Qui il gruppo centrale è ripetuto da zero ad infinite volte e non deve avere nome (altrimenti si entra in altre dimensioni… asd) mentre il gruppo esterno colleziona queste ripetizioni interne e le salva in $2. Quindi se si ha la situazione:

style="uno" roba=asd pippo="gianni" style="due"

Questo sarà il valore della cattura in $2:

roba=asd pippo="gianni"

E quindi avverrà questo magico accorpamento dei due style, mantenendo il resto del ciarpame:

<td style="background-color:blue;" colspan="2" rowspan=1 style="color:red">
↓
<td style="background-color:blue; color:red" colspan="2" rowspan=1>

Notare che ci si è presi lo scrupolo di non far venire ;; nel concatenare le due proprietà CSS o di dimenticarsi proprio ; nella loro congiunzione.

D’altra parte se fin’ora abbiamo acchiappato e convertito i bgcolor ora questo processo dovrà essere ripetuto per color, valign, align ed altre cose, più o meno in quest’ordine. Perché in quest’ordine? Perché il color va sostituito dopo aver sostituito eventuali bgcolor, perché bgcolor può essere frainteso come color e se non avete voglia di piazzare un lookahead per decidere quando inizi il nome di un attributo HTML… insomma, bisogna considerare l’ordine.

C’è anche da dire che finché si sostituisce solo un singolo attributo come bgcolor si rischia al massimo di creare due style e questo problema è risolto con la sostituzione appena citata. Al contrario se gli attributi iniziano ad essere n occorrerà lanciare n volte l’espressione numero 4 affinché passo dopo passo tutti gli style si vadano ad inglobare passaggio dopo passaggio:

<td bgcolor=red color=red valign=left colspan="1" style="padding:1px">
↓
<td style="background:red" style="color:red" style="vertical-align:left" colspan="1" style="padding:1px">
↓
<td style="background:red; color:red; vertical-align:left" colspan="1" style="padding:1px">
↓
<td style="background:red; color:red; vertical-align:left; padding:1px" colspan="1">

(Come fai ad essere già qui? asd. Torna su a constatare i passaggi finché non ti convinci dell’efficacia della espressione regolare numero 4 e del fatto che basti lanciarla n volte per avere un corretto accorpamento dei n attributi deprecati esplosi nei vari style)

Ebbene, lanciando tutte queste espressi regolari su una pagina a caso ecco il risultato: test.

A questo punto si lancia il mio bottino personalissimo e si corregge Wikipedia:

./replace.php \
--always \
--wiki=itwiki \
--generator=search \
--gsrsearch='insource:bgcolor' \
--regex \
--summary="Bot: cose" \
REGEX1 SOSTITUZIONE1 \
REGEX2 SOSTITUZIONE2 \
...

E per oggi le nostre inutilità le abbiamo fatte.

E anche oggi siamo riusciti a non usare un parser HTML per fare ciò che bisognerebbe fare con un parser HTML. asd

P.S.
Naturalmente non solo è stupido pensare che qualcuno mi ringrazierà per aver fatto una cosa del genere (o forse a farlo sarà il World Wide Web Consortium? chissà. asd) ma sarebbe altrettanto stupido pensare che non sia scappato un errore da qualche parte in qualche corner-case allucinante in qualche voce a bassissima visibilità fuori dai controlli a campione, magari proprio mentre mi ero distratto un momento a rispondere alle domande impertinenti di quel bischero di Ferdi2005, mentre con una pupilla monitoravo il bot e con l’altra gli mandavo una gif di un Sofficino. Quindi, fra 2 anni, un utente verrà giustamente a cazziarmi e dovrò giustamente spiegargli come mai io mi sia permesso di non verificare come mai nella sua specifica circostanza un testo abbia potuto perdere la formattazione desiderata. Dannato Ferdi2005. Dannati Sofficini. asd

La vita non da gioie. Le espressioni regolari neanche. Ma almeno abbiamo dimostrato ancora una volta quanto le espressioni regolari siano bellissime. asd

Comandare sul web: injection javascript

Injection javascript Reyboz Blog

Come si può “comandare” sul web? Come possono persone normali avere accesso a parti segrete di siti poco controllati, o di incrementare punteggi di browser-game in poche mosse?
Lo capiremo partendo da molto lontando attraverso questa breve guida dedicata alle injection-javascript.

Una estrazione (extraction) javascript è un metodo di controllo del codice di un sito tramite l’estrazione diretta delle variabili, via indirizzo ipertestuale.
Significa che per controllare una variabile di un sito web (un punteggio di un gioco online o la password di un utente loggato ad esempio) basta conoscere il nome della variabile che lo custodisce, e richiamare il suo valore inserendo nella barra degli indirizzi un comando di richiamo come javascrpt:alert(nomevariabile);
Questo tipo di estrazione si è però evoluto in forme molto complesse di iniezione chiamate injection javascript, delle quali approfondiremo ora.
Le chiamano injection javascript perchè con esse si può riuscire a modificare parte di una pagina web durante la propria sessione di navigazione, e quindi riuscire ad apportare modifiche consistenti ad un qualunque sito o gioco online, esclusivamente utilizzando codici, iniettati nella pagina, tramite la barra degli indirizzi, o tramite un segnalibro web.
Quello che faremo ora sarà prendere di mira alcuni siti molto famosi e sostituire un oggetto della pagina con del testo a nostra scelta.
Premettiamo che questo tipo di modifica non è reato: una injection javascript non è infatti una distruzione della pagina ma solo una modifica parziale lato-utente del listato javascript, del tutto ripristinabile ricaricando la pagina.
Ma insomma! Partiamo!

Step one

Prima di tutto, assicuriamoci di usare Firefox e non Internet Explorer (poichè I.E. si blocca con le injection javascript)
Ottenuto Firefox creiamo un segnalibro che ci servirà da “iniettore”

  • Digitiamo CTRL+D
  • Selezioniamo “Barra dei segnalibri” come cartella
  • Salviamo il segnalibro

Step two

A questo punto comparirà il segnalibro della presente pagina nella vostra barra dei segnalibri. Quindi:

  • Selezioniamo tutto il seguente codice e copiamolo (compresa la scritta “javascript:”):

javascript:
x="Questo e' un esempio di Injection Javascript - Reyboz Blog";
alert('Codice da iniettare:nn'+x);
x="<h1>"+x+"</h1>";
document.getElementById('previewPan_w1').innerHTML=x;
alert('Injection eseguita.');

  • Selezioniamo il segnalibro precedente con un click destro
  • Selezioniamo Proprietà
  • Incolliamo il precedente codice nello spazio dedicato all’indirizzo del segnalibro.

Ora avremo nella barra degli indirizzi il segnalibro che conterrà come indirizzo lo script: servirà ora per iniettare una scritta nel famoso motore di ricerca Blackr.

Dritti al cuore di blackr

Bando alle ciance:

  • Dirigiamoci sul Blackr
  • Lanciamo il segnalibro con un click su di esso
  • Clicchiamo su Ok ai 2 messaggi
  • Osserviamo

Se avete eseguito tutti i procedimenti Blackr apparirà con una scritta nella parte destra.

Ma noi non ci siamo fermati:

Dritti al cuore di facebook

  • Accedete al vostro Facebook
  • Rieseguiamo lo Step One
  • Incolliamo nel segnalibro tutto il seguente codice al posto dell’indirizzo:

javascript:
x=prompt('Inserisci il tuo nome di Facebook: (serve)','qui');
x="<h1>Mi chiamo -"+x+"- Salve! </h1>";
document.getElementById('navSearch').innerHTML=x;
alert('Injection eseguita.');

  • Salviamo il segnalibro
  • Clicchiamo sul segnalibro
  • Osserviamo

Se tutto è andato bene comparirà nella parte del titolo del vostro profilo di facebook una piccola modifica testuale.
Tranquilli, tutto torna normale digitando il classico F5.

Dritti al cuore dei giochi online

Scaricheremo un piccolo gioco online della Mr. Webmaster intitolato Chi vuol essere milionario. Dunque scarichiamolo, estraiamolo sul nostro computer e iniziamo subito a giocare.
Noterete che il gioco funziona perfettamente ma perchè non barare un po’?

  • Aprite il gioco
  • Ripetete lo Step One
  • Incolliamo nel segnalibro tutto il seguente codice al posto dell’indirizzo:

javascript:
function prossimadomanda(){
document.gioco.giustaa.value="giusta";}
alert('Preparazione alla injection in corso.');
prossimadomanda();
alert("Script abortito, la risposta sarà sempre la numero:nn-A.")
;

  • Salviamo il segnalibro
  • Clicchiamo sul segnalibro
  • Osserviamo

Come potete immaginare è stato iniettato un codice che modifica questo semplice gioco rendendo le risposte tutte uguali.
La nostra piccola lezione sulle injection javascript è ormai giunta al termine, vi auguriamo che tutto sia stato comprensibile e che vi siate divertiti scoprendo i segreti celati dietro alla modifica dei siti web. Vorremo precisare che tutto questo non deve apparire come un articolo “terrificante”,  questi utilizzi javascript non sono paragonabili a pirateria informatica e nè lo saranno mai, poichè il web deve essere uno strumento comune di insegnamento e non un segreto privato.
Grazie per la lettura.

Motore di ricerca Reyboz Search

Il 3 ottobre 2010 era arrivato online il “motore di ricerca” Reyboz search, che utilizzava come spunto Neroogle, cioè era un semplice launchpad di Google ma a sfondo nero.

Google offre a tutti gli utenti registrati di creare il proprio motore di ricerca personalizzato, e avevamo sfruttato ciò finchè non ce l’hanno inspiegabilmente rimosso.

Il Reyboz Search permetteva di rilassare gli occhi anche dopo aver inserito la query di ricerca grazie al layout in scale di grigi, mentre ora lo è soltanto nella schermata iniziale.

E va beh…

Semplice pesce d’Aprile con Google

Soltanto un piccolissimo scherzo creato per un pesce d’aprile, realizzato scopiazzando Google e apportando un semplicissimo script in Javascript ad una pagina.

Immagine di errore di Google (totalmente inventato) creato utilizzando Javascript - Reyboz Blog

Link diretto: Google scherzo 1.0

Principalmente lo script si basa sull’effettuare una finestra Alert ogni volta che avviene l’evento ‘Clic’, niente di complicato:

ONCLICK="javascript:alert('Errore');"

E’ possibile trascinare il link dello scherzo sul simbolo homepage (Icona tasto homepage - Reyboz Blog) del vostro browser: in modo che il prossimo che accederà ad internet si cuccherà questo semplice scherzo.