Above the Fold wordpress plugin per bloccare CSS

E veniamo a parlarvi di google page speed gtmetrix o webpagetest e altri tool e del codice Javascirpt e Css bloccano la visualizzazione  above-the-fold dei contenuti
Di cosa trattino i tool sopra credo che lo sappiate perfettamente. Facciamo un brevissimo riepilogo che ci sarà utile nella trattazione di questo argomento.

Tool per testare la velocità del proprio sito.

 

  • Google Page Speed Google Page Speed e il problema Above the FoldSi tratta del tool ufficiale di google per testare la velocità del vostro sito e vi da alcuni suggerimenti sui problemi che avete senza però entrare nello specifico e visualizzare i numeri.
  • gtmetrix GtMetrixdiciamo che fa quello che non fa google page speed ossia correda tutto con dati e mostra suggerimenti concreti su come operare, inoltre nel caso fornisce anche lo script da immettere per migliorare o immagini già scalate. E’ quello che preferisco.
  • Web Page Test  Web Page Test come risolvere il problema above the fold è anch’esso un ottimo strumento fornisce pochi elementi, ma i suoi dati sono considerati i piu’ accurati, in particolare per noi italiani è molto consigliato testare sul loro server che hanno in Olanda.

Diciamo subito una cosa avere 100/100 a page speed , oppure 100% su gtmetrix oppure tutte A su Web Page Test non è possibile , in quanto da qualche parte bisogna fare un sacrificio. Un rapido esempio.

Su Web Page Test ho sacrificato le immagini nel senso che sono caricate con un sistema di cache da Jetpack e quindi mi posso permettere di non caricarle non compresse, in quanto non affaticano il mio server. E altro ancora, per esempio mettiamo che volete fare il defer degli script e mettere un caricamento asincrono dei file js , vi accorgerete che alcuni plugins potrebbero non funzionare correttamente, quindi il vostro punteggio potrebbe certamente aumentare a discapito del funzionamento dei plugins.
Questo per dirvi che migliorare le prestazioni del vostro sito è tutta una serie di piccoli incastri e se aggiungete da una parte toglierete dall’alra. E chi vi dirà di avere tutto ok , tutto 100 e vi mostrerà le relative immagini…. magari è piu’ esperto di photoshop che di codice…

Come faccio ad affermare questo? Semplice con i tool da lui indicati andate a verificare il suo sito ….e vedrete che i risultati sono molto diversi da quelli millantati….

Ma andiamo oltre se siete qui sicuramente è per il contenuto above the fold. Iniziamo a comprendere meglio

Cosa significa Above the fold?

Spesso e volentieri proprio sul termine c’e’ molta confusione che poi porta a non comprendere bene il problema che abbiamo. Il termine Above the fold deriva letteralmente dalla carta stampata ed in particolare dai giornali. Considerate il classico giornale ripiegato in due parti. Above the Fold è la parte che si trova sopra la piega, ossia la prima parte che leggerete, per leggere la seconda parte dovrete spiegare il giornale.

Stesso concetto si applicherà al vostro sito web. Above The Fold è la parte che sarà visibile senza necessità da parte dell’utenza di fare uno scrolling verso il basso appena arrivata nel vostro sito. Per questo motivo molti webmaster furbi tendevano a riempire questa pagina con ogni genere di pubblicità ed è per questo motivo che google tende a penalizzare questa pratica con i nuovi algoritmi Panda e Penguin 1 e 2.
Adesso che abbiamo compreso il problema vediamo come risolverlo, se siete qui sicuramente google page speed o un altro tool vi avrà comunicato la fatidica frase

“Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
La tua pagina presenta 1 risorse script e 2 risorse CSS di blocco. Ciò causa un ritardo nella visualizzazione della pagina.”

Questo vuol dire che il rendering della vostra pagina html , ossia la capacità del browser di visualizzare la vostra pagina above the fold, non puo’ avvenire prima che siano stati caricate script o risorse che per questo vengono definiti di blocco. Come avrete intuito si tratta piu’ che altro di immagini of file js.
Vediamo come risolvere il problema in Worpdress

Above The Fold e i plugins di WordPress

Ci sono molti plugins per risolvere questo problema io ve ne indico essenzialmente due

  • Async JS and CSS Molto completo vi permette di risolvere in problema con varie alternative , ossia incorporando tutti i file css e js nell’head, collegando css nella head e i js nel footer, oppure caricamenti asincroni. Tutte ottime soluzioni , unico punto debole di questo plugin che talune volte ha incompatibilità con altri plugin, risultato il vostro punteggio nei vari tool migliora ma il sito non funziona come dovrebbe.
  • Autoptimize. Questo plugins ha un funzionamento molto simile al precedente, concatenza, carica asincrono anche se non lo dice esplicitamente, minimizza etc. etc. ha però al momento una particolarità unica nel suo genere. Ossia permette di individuare quei css che bloccano il rendering above the fold e caricarli dopo. Come? La novità è il suo punto di forza di questo plugin ossia le individuate voi. Spuntate la casella  code in line css per il problema Above the FoldA questo punto inserite il vostro sito in questo url https://jonassebastianohlsson.com/criticalpathcssgenerator/, mettete anche il vostro foglio di stile del tema che state utilizzando e avrete come risultato i css che bloccano il rendering lo immettete nella casella come sopra e salvate svuotando la cache. Riprovate con google page speed e vedrete che almeno per quanto riguarda i css il problema sarà sparito.

E per il tema Above the Fold è veramente tutto spero di essere stato chiaro, altrimenti potete sempre chiedere qui sotto o sul forum

WordPress Error 404 page not found su tutti gli articoli

E veniamo adesso a parlarvi di WordPress e Error 404 page not found.
Onestamente si tratta di un problema molto ricorrente, che si pensava nel corso del tempo sarebbe stato automaticamente risolto dai progettisti di WordPress , ma a quanto pare la soluzione è piu’ semplice della programmazione.

Se siete approdati in questa pagina con ogni probabilità avete appena fatto un qualche aggiornamento di WordPress. Ma nel farlo non avete deattivato tutti i vostri plugins , ma sopratutto non avete deattivato i vari plugins della cache ossia W3 Total Cache o Wp Cache, tipicamente è questo che accade.

Vi dico questo perchè se dopo un aggiornamento avete riscontrato un problema di questo tipo ossia che ogni articolo , categoria , tag , pagina del vostro CMS Worpdress va in errore 404 page not found, allora probabilmente vi si è generato un conflitto fra un plugins di Cache e la riattivazione del CMS stesso nell’htaccess.

Insomma per dirvela in breve , se si è verificato questo conflitto non andate a ricaricare vecchie versioni di worpdress o database o cominciate a deattivare , attivare plugins o Temi , non ne uscirete. Per risolvere questo tipo di problema c’e’ un ‘unica soluzione ed è davvero semplicissima.

Andate in Impostazioni (Setting) e dopo in permalink dopo cliccate in Salva le Modifiche e dopo breve tempo vedrete che l’error 404 page not found errore 404 pagina non trovata cesserà di esistere.

E’ anche possibile che se siete arrivati a questa pagina abbiate fatto tanti tentativi, attivando e deattivando a casaccio i plugins come dicevo sopra, finendo con incasinare un pò il tutto. Detto questo bisognerebbe andare a vedere nello specifico cosa è realmente accaduto, cosa è stato modificato e dopo procedere con dei ripristini graduali. Ma anche qui spesso e volentieri la soluzioni risulta essere piu’ semplice del problema.

Mettiamo per Ipotesi che utilizzate Wp Cache e Yoast SEO. Se non lo fate male , in quanto i due Plugins sono compatibilissimi e non generano problemi.

Avete utilizzato la procedura che vi ho descritto sopra , ma non siete approdati a nulla. Dobbiamo appunto ricorrere a metodi piu’ drastici.

Quindi andate in WP-Cache cancellate la cache scaduta un 5/6 volte e dopo deattivate la Cache.

Risolvere il problema di Yoast Seo di Worpdress
Yoast SEO

Andate su Yoast SEO Strumenti e dopo Modifica File accedete quindi al file htaccess e fatene una copia del contenuto perchè è possibile che abbiate cmq di riprendere qualche settaggio successivamente.

Cancellate tutto , rittivate la cache in WP-Cache e risalvate il Permalink come al primo punto. Ora dovrebbe funzionare tutto, se avete avuto questo tipo di problema insomma se l’error 404 page not found è derivato da questo.

Webmaster-Tools-300x225.jpg

Altrimenti lasciateci pure i vostri commenti vedremo come potervi aiutare nel risolvere il vostro problema al CMS WordPress.

Defer Parsing of Javascript con WordPress in Htaccess, filtri o plugins

Vediamo adesso come risolvere il problema de defer parsing of javascript, tradotto letteralmente significa Rimanda analisi del codice JavaScript, entriamo nello specifico . Con l’avvenuto sopratutto dei social network si è imposto il problema del caricamento dei Javscript. In seguito è venuto il problema dell’analisi e il defer parsing of Javascript riguarda esattamente questo secondo aspetto. Ossia ci stiamo riferendo a quegli script che non solo vengono caricati nel header dell’html ma che vengono anche processati mentre si sta caricando la pagina, ovviamente questo è un problema per il vostro visitatore che dovrà attendere che tutti gli script siano stati eseguiti prima di vedere il caricamento effettivo della vostra pagina web.

Questo problema si apprezza ovviamente utilizzando i tool che mostrano la velocità del vostro sito in particolare GTMetrix e Google Page Speed , ma anche gli altri si stanno attrezzando.

Defer Parsing of Javascript con il CMS WordPress

In questo articolo ci occuperemo proprio come risolvere questo problema del differire l’analisi della vostra pagina nello specifico con il CMS WordPress e vi mostreremo due soluzioni. La più tradizionale è quella di ricorrere ai plugins, nello specifico un ottimo plugins che fa al caso nostro è sicuramente WP Deferred JavaScripts è molto semplice da utilizzare, in pratica basta installarlo , nelle impostazioni trovate un richiamo al plugins installato ma l’unica opzione che presenta è quella di inserire file che non volete che sia effettuato il deffer parsing.

Esiste una soluzione manuale che è quella di aggiungere un filtro al file funcions.php che trovate nel tema che state utilizzando, io utilizzo FTP per modificarlo, ma va bene anche editor che trovate in Aspetto e dopo andate sul functions.php appunto e inserite questo filtro.

Defer Parsing WordPress code

Ma con una precauzione che è quella di salvare prima template e DB perchè ha dato qualche problema in taluni casi, in ogni caso se volete prendere questa seconda strada , prima deattivate la cache, e scollegate i plugins. Il vantaggio è che i plugins aumentano le richieste e quindi anche il tempo di caricamento del sito.

Defer Parsing of Javascript con Htaccess

Vediamo ora come differire l’analisi del codice Javascript mediante il file .htaccess e le relative regole per il demone Apache. In primis anche qui se non avete plugins come SEO Yoast dovrete scaricare e caricare il file .htaccess che trovate nella root del vostro sito. Quindi inserite il seguente codice

<FilesMatch "\.css$">
 SetHandler application/x-httpd-php
 Header set Content-type "text/css"
<FilesMatch "\.js$">
 SetHandler application/x-httpd-php
 Header set Content-type "application/javascript"

di fatto fa la stessa identica cosa del filtro che vedete sopra .

WordPress veloce con i CDN settando i nameserver

In questo articolo vi parliamo di come velocizzare WordPress attraverso i CDN o CloudFlare. Ovviamente questa guida vale anche per velocizzare vi spiegheremo tutto.

Sicuramente se state leggendo questo articolo , vi trovate nella sgradevole situazione di avere constatato con vari tool che il vostro Worpdress è lento, avrete confrontato i vostri dati con quelli dei vostri rivali, avrete ottimizzato al massimo per quanto possibile, ma nulla ancora nulla, siete lenti e sicuramente avrete sentito parlare di CDN e al tempo stesso del famoso sito di CLoudFlare.

Queste sono in genere le persone che atterrano dal web in questa pagina. Ma in realtà di cosa stiamo trattando?

Cosa sono i CDN  e cosa hanno a che vedere con WordPress?

Cosa sono i CDN per velocizzare i WordPress

Iniziamo con il dirvi che CDN è l’acronimo di Content Delivery Network tradotto un pò alla buona “Rete per la consegna di contenuti” , ora non entriamo proprio nello specifico , non è questo il motivo per cui ho scritto l’articolo, vi basti sapere che la rete è costituita da un’infinità di nodi distribuiti su Dorsali , che altro non sono che dei Server per il passaggio di informazioni, che partono dal Server iniziale dove avete richiesto l’informazione fino ad arrivare al vostro computer di casa.

Lo scopo dei CDN è quello di ottimizzare la consegna delle informazioni al fine di ottimizzare la velocità di trasmissione e quindi il caricamento della pagina web nel vostro browser.

Facciamo un discorso in più, sappiamo purtroppo benissimo che i server esteri , specialmente quelli americani sono molto migliori rispetto a quelli italiani, sempre aggiornati, migliore UP Time, offrono più servizi etc. etc. e quindi, specialmente negli anni passati si è diffusa la moda di comprare soluzioni hosting presso server americani. Ce ne sono di notissimi come Hostgator, Godaddy, BlueHost, DreamHost etc. etc. . Tutte case veramente efficienti , ma si pone un problema ossia la latenza con cui viene caricata la pagina nel vostro server. Quello che google page speed chiama il Time To First Byte o TTFB o letteralmente il tempo che impiega il vostro Browser a ricevere il primo byte dal server americano, che comprenderete essendo in America impiega più tempo di un datacenter in Italia.

Capita spesso che poi anche se il TTFB americano è maggiore della soluzione hosting italiana , la pagina venga caricata prima dal server americano a parità di prestazioni. Che questo è già di per sè una misura chiara e precisa che il vostro hosting non è dei migliori.

TTFB è il nome tecnico, la terminologia che Google utilizza Google nel Page Speed Insight è
Migliora tempo di risposta del server e da tutta una serie di indicazioni talmente generiche che il più delle volte uno si chiede ma di cosa stanno parlando? E’ capitato a tutti.

Chi ha veramente bisogno dei CDN?

In pratica appunto chi ha una soluzione hosting i cui datacenter siano lontani dal proprio paese. Vedi sito in Italiano hosting in America. Con questo sistema le informazioni byte non sono consegnati al vostro browser dal server americano, ma dai nodi CDN più vicini all localizzazione geografica del Server richiedente, capite quale immenso vantaggio sia. Io ho provato questa tecnica anche con dei server con datacenter in Italia e vi posso garantire che se avete un sito lento avrete delle migliorie anche in questo caso. Già proprio cosi’ perchè lo scopo con cui sono nati i CDN è proprio quello di ridurre la banda, in seguito e attualmente i CDN vengono usati anche per prevenire lo Spam in quanto i messaggi di SPAM non vengono consegnati nei commenti al server finale dove risiede il Data Center.

E quindi adesso che sappiamo di cosa si tratta vediamo come procedere esistono principalmente due modi o società che sono la MAX CDN e la CloudFlare, la prima è a pagamento, la seconda prevede anche una soluzione gratuita. Se usate Hostagator ad una modica cifra vi verrà data la possibilità di utilizzare una soluzione interna ideata da Siteblock , società consorziata con Hostgator nata per togliere i malware dai vostri siti.

Come vedete sulla destra sono evidenziati delle nuvolette cloud in arancione dopo Automatic, questo vuol dire che il cloudfare in arancione sono gestiti daiCDN Cloudflare

 

 

Se utilizzate come plugins di WordPress W3 Total Cache allora vi consiglio di utilizzare MAX CDN altrimenti utilizzate CloudFlare che va benissimo.

Una volta fatta la registrazione il sistema vi chiederà di immettere un sito web, il sistema cercherà automaticamente in 60 secondi tutti i record dei DNS che è l’acronimo di Domain Name Server ossia il sistema utilizzato per la risoluzione di nomi dei nodi della retein indirizzi IP e il suo viceversa. I DNS si identificano attraveso I Recordo DNS che identificano le sue informazioni. Non ci addentriamo molto, ma se volete approfondire trovare tutto su Record DNS Wikipedia. Una volta fatto ve li mostrerà con una figura del genere

Vi chiederà di aggiungerne altri se non sono in elenco, ma generalmente il sistema è molto efficiente e questo non accade, se dovesse accadere , io faccio un esempio con hostgator, dovete andare nel vostro pannello dei DNS

E nel caso mancasse qualcuno fare la dovuta aggiunta.

Andate avanti nella schermata di cloudflare e alla fine vi indicherà due nomi di nameserver, questi nomi andranno messi nel vostro pannello del vostro hosting. Nell’apposita sezione dedicata ai nameserver, dipende dalla soluzione hosting , nel caso chiedete all’assistenza vi indicheranno loro dove metterli. Il gioco è finito , tipicamente dopo 12 ore , i nuovi name server si saranno propagati in tutta la rete, ossia ogni nodo CDN avrà registrato i nuovi name server e facendo i test con GTMetrix , WebPageTest o Page Speed noterete la differenza fra il prima e il dopo.

 

Concludo dicendo che potete mettere anche un plugins  di WordPress che si chiama CloudFlare appunto, attenzione però che non contribuirà a nessun miglioramento specifico del vostro blog, ma unicamente a fare dei report a cloudfare.com su come stanno funzionando i CDN nel vostro sito. Insomma è più che altro un report che aiuta il sito cloudflare a monitorare il vostro WordPress

PHP, JS e JSP riconoscere dispositivo mobile

Vediamo ora come riconoscere se siamo su un dispositivo mobile o meno con il giusto software di script lato client e lato server. Ossia PHP, JS e JSP ma insomma vedrete che potrete farlo anche con gli altri linguaggi. Il motivo di questo riconoscimento del dispositivo mobile è ovvio . E risiede nel fatto che quando lo è vogliamo che il sito reagisca in una determinata maniera in quanto le dimensioni video sono minore di quelle di un dispositivo desktop / laptop da 1024 x 780 in su. Sotto si considerano dispositivi mobili che siano tablet otto pollici oppure Smartphone

Dispositivi Mobili

Iniziamo con il lato Server.

PHP Riconoscimento dispositivo mobile

Per riconoscere se siamo su un dispositivo mobile o desktop con PHP utilizzeremo al variabile di ambiente HTTP_USER_AGENT , e utilizzero anche il metodo bool e la funzione string position o strps.

Ossia per esempio

$iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");

$_SERVER[‘HTTP_USER_AGENT’] restituisce il dispositivo che state utilizzando per esempio iphone. la fuzione strpos restituisce come valore 1 in quanto iPhone compare fin dalla prima posizione e il bool di 1 è ovviamente in Algebra booleana il valore Vero. Dopo facciamo un if e otteniamo se è o meno un dispositivo mobile

$iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
$ipod = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPod');
$android = (bool) strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$webos = (bool) strpos($_SERVER['HTTP_USER_AGENT'],"WebOS");
if(!$ipad && !$iphone && !$android && !$webos && !$ipod){
//Non è un dispositivo mobile
}else{
// è un dispositivo mobile
}

Javascript Riconoscere un dispositivo mobile

Js o Javascript è un dispositivo lato client e quindi questa volta utilizzeremo la funzione navigator.userAgent che reagisce a secondo di come viene richiamata la pagina dal browser , carichiamo questa variabile su testmobile e quindi la testiamo per vedere se è vera o meno la condizione.

 var testmob = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (testmob) { /*Si sta utilizzando un dispositivo riconosciuto mobile*/ } else { /* E' un dispositivo Laptop o desktop non motible*/ }

JSP Riconoscere dispositivo Mobile.

Il meccanismo è pressochè identico con le jsp anche qui si agisce sul server come nel caso PHP e quindi anche qui si interroga la variabile User-Agent e dopo si fa il matches per vedere se contiene uno dei valori dei dispositivi mobili.

<% String ua=request.getHeader("User-Agent").toLowerCase(); if(ua.matches("(?i).*((android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino).*")||ua.substring(0,4).matches("(?i)1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-")) { response.sendRedirect("/*Qui Le Istruzioni per i dispositivi Mobile*/"); return; } %>

Attacchi Cross-site Scripting (XSS) come bloccarli

Dedichiamo adesso questo articolo per raccontarvi dell Cross-site Scripting (XSS) , ossia un attacco hacher che viene fatto con gli script. Principalmente si tratta di iniettare nel vostro browser un codice maligno che effettui dei danni o trasferisca informazioni. Ma ci ritorneremo a breve , come dice il nome stesso l’attacco Cross-site Scripting (XSS) è realizzato con gli scripting e più precisamente con quelli lato Client, ossia nel vostro browser, si tratta di un attacco decisamente subdolo e non sempre è percepibile quello che stiamo subendo. Ovviamente essendo un attacco di scripting i linguaggi con il quale viene fatto sono principalmente con VB, ActiveX , Flash , ma è ovvio che principalmente è usato Javascript per le sue proprietà intrinseche. Ossia con Javascript è possibile

  • accedere ai cookie di sistema che poi è quello che un hacker va cercando
  • microfono o altri comandi similari
  • Oggetti Dom
  • Httpxmlrequest e quindi gestire o intercettare la vostra chiamata a moduli input/database.
  • la vostra posizione tramite le API dell’HTML 5

 

Questi sono solamente alcuni esempi , ma è ovvio che con le API e gli Oggetti Dom di Javascript si ha praticamente accesso a quasi tutto. Vediamo un attimo ora come funziona nello specifico questo tipo di Attacco.

 

Cross-site Scripting (XSS)

Attacchi Maligni di Tipo Cross Site Scripting XSS esempio

 

Come mostrato dalla figura l’attacco è strutturato in quattro fasi e come mostra la figura di stratta di un attacco abbastanza alla portata di chi legga una buona guida e abbia delle conoscenze nemmeno troppo eccelse di Javascript , per questi motivi la guida che state leggendo è volutamente mancante di alcune parti che potrebbero spiegare a qualche malintenzionato di andare oltre….

  1. L’aggressore hacker caricherà nel database o solamente nel web site vulnerabile tipicamente un blog o un sito di qualsiasi natura tipicamente tramite un attacco DOS un codice maligno latente.
  2. Al primo punto viene fatta una richiesta al database di un sito di leggere dei dati che preleverà verosimilmente da Database
  3. Lo script ovviamente viene caricato nel browser del richiedente o vittima
  4. Lo script verrà eseguito nella vostro computer darà i risultati da voi richiesti ma contemporaneamente fornirò anche dei dati segreti ad un altro host che tipicamente è quello dell’host dell’aggressore hacker , oppure di un suo referente secondo lo schema indicato in figura.

Ribadiamo questo è solamente un esempio dei tanti che si possono fare tramite un attacco Cross-site Scripting (XSS)

Il brutto di questo nuovo attacco è che come vi ho già detto chiunque conosca un minimo di JS può farlo.

Lo potete trovare in varie forme, ve ne indichiamo le più comuni

nel vostro head

src=” sitoaggressore.com/xss.js”>

alert(“XSS”);

e dopo richiamarlo nel body

XSS Scripting nelle immagini

in questo caso il codice potrebbe essere il segue

< img src = ” javascript: alert(“XSS”); ” >

Cross-site Scripting (XSS) nel modulo Input

In questo modo penserete di richiamare l’immagine per un modulo input ma in realtà attivate il codice maligno

< input type=”image” src = ” javascript: alert(‘XSS’); ” >

Cross-site Scripting (XSS) nel div

Ovviamente nel div è ancora più semplice vi baserà fare

< div style= background-image: url(javascript : alert (‘XSS’))”>

Insomma come vedete è veramente semplice, ma come risolvere il problema?

Come bloccare e ripulire dagli attacchi Cross-site Scripting (XSS)

Andiamo per passi

  • Ovviamente quando si subisce questo tipo di attacco vuol dire che il sito è stato compromesso, sarà stato un DoS , sarà stato un attacco di forza bruta, ma l’aggressore da qualche parte ha avuto accesso ai vostri dati. Quindi primo passo cambiateli tutti, cambiate password del sito , cambiate quella del database , del FTP e nel caso cambiate anche quella dell’hosting che potrebbero essere entrati anche da li.
  • Il secondo passo è sicuramente quello di togliere tutto il codice maligno presente, vi metto un indicazione. Supponiamo che si tratti di wordpress. Qui il passo è semplicissimo. Infatti non dovrete stare a controllare ogni singolo table, div, image etc. etc. vi basterà o fare l’aggiornamento alla versione successiva di WP, oppure se siete già all’ultima versione reinstallarla.
  • Sempre nel caso che siate in WordPress scaricatevi qualche plugins di sicurezza come Wordfence o Sucure magari abbinandoli a Limit Login Attempt , lo so rallentano un pò il blog , ma vedrete che una volta che siete stati perforati vorrete metterci questi e altri 10.

Una volta che il sito è ripulito e che è stato messo in sicurezza vediamo come prevenire questo tipo di attacco. Diciamo che ci sono due metodi alternativi , se avete accesso al vostre demone Apache inserite questo comando nel httpd.conf

X-XSS-Protection: 1; mode=block

Oppure se il vostro blog risiede su un hosting condiviso allora dovrete modificare il vostro htaccess inserendo questo codice

 

<IfModule mod_headers.c>
  Header set X-XSS-Protection "1; mode=block"
</IfModule>