Come ripristinare un sito web hackerato

I campanelli di allarme che ci avvertono che un sito web è stato hackerato sono vari ma possono passare inosservati, anche in base al tipo di attacco. Tra questi abbiamo:

  • Avvisi sull’hacking da browser e motori di ricerca;
  • Link che reindirizzano a siti sospetti;
  • Volumi elevati di traffico da altri paesi;
  • Pagine danneggiate;
  • Tempo di caricamento prolungato;
  • Avvisi sulla blocklist di Google;
  • Snippet di codice casuali che appaiono nell’header o nel footer.

Se si sospetta un attacco esistono diversi checker di siti web, come Sucuri siteChek, DeHashed e Have I Been Pwned? che si possono usare per avere conferma.

Cosa fare quando si ha la certezza che il sito sia stato attaccato

Il primo passaggio da compiere una volta che si è certi di aver subito un attacco hacker sul sito web è modificare tutte le password e verificare l’accesso.

Gli hacker tentano di indovinare la password dell’account amministratore utilizzando combinazioni di lettere e numeri, la modifica di tutte le password revocherà l’accesso al sito e impedirà loro di compromettere altri account.

Bisognerà assicurarsi di reimpostare la password per:

  • Account hosting;
  • Account FTP;
  • Account amministratore del content management system (CMS);
  • Database, tramite il file di connessione al database;
  • Account di posta elettronica associati al sito hackerato.
  • Altri account che utilizzano le stesse credenziali di accesso.

Se il sito hackerato è ospitato su WordPress si dovranno controllare i ruoli utente e le autorizzazioni esistenti accedendo a Utenti nella dashboard di amministrazione, seguendo la stessa procedura sulle piattaforme che concedono l’accesso a più utenti, come il pannello di controllo dell’hosting e il sistema FTP.

Buona parte dei tentativi di hacking si verifica dopo che un sito web subisce modifiche che creano nuove vulnerabilità da sfruttare. Tracciando le azioni si può risalire all’origine dei problemi di sicurezza: bisognerà cercare tra i log web un improvviso picco di traffico e ispezionare i log degli accessi e i registri degli errori tramite il pannello di controllo dell’hosting, identificando eventuali attività sospette o errori che hanno avuto luogo entro il periodo di tempo sospetto.

Dopo essere risaliti al momento in cui si è verificato l’hacking si esamineranno tutte le modifiche apportate.

Se il sito web in questione viene eseguito su un hosting condiviso l’origine dei problemi di sicurezza potrebbe provenire da un altro sito che condivide il server. In questo caso gli attacchi informatici potrebbero prendere di mira anche il tuo account di hosting.

La maggior parte degli host web fornisce agli utenti l’accesso ai log web, consentendo di monitorare le visite. Se la registrazione dell’accesso al server è disabilitata per impostazione predefinita, contatta il provider di hosting o abilitala manualmente.

Controllare lo stato del sito web

Se Google rileva attività sospette su un sito web è probabile lo blocchi. Di conseguenza questo non verrà visualizzato nei risultati di ricerca per proteggere i visitatori.

Si può verificare se il sito finisce su Google Blocklist utilizzando Google Search Console. L’avviso appare nella sezione Sicurezza e azioni manuali > Problemi di sicurezza.

In alternativa si può utilizzare Google Safe Browsing, un tool che indica proprio se un sito sia o meno sicuro o Google Analytics, che darà conferma dell’effettivo blocco del sito se si registra un calo di traffico improvviso.

Oltre che su Google Blocklist il sito potrebbe apparire anche nel database anti-spam. I provider di servizi internet, di posta elettronica e le piattaforme anti-spam utilizzano gli elenchi di blocco per impedire che le email di spam entrino nei loro sistemi. Le email provenienti dagli indirizzi IP elencati in questa blocklist verranno bloccate o finiranno nella cartella spam.

Si può verificare se il dominio è presente nell’elenco di blocco dello spam con strumenti di controllo dell’integrità del dominio come MXToolBox e Domain DNS Health Checker. Questi, oltre a fornire informazioni sullo stato del dominio, possono individuare problemi relativi al server web, di posta e al DNS.

Le vulnerabilità della sicurezza non sono sempre visibili agli amministratori, è consigliabile quindi utilizzare gli strumenti di scansione del sito web per ricontrollarlo, individuando eventuali vulnerabilità da risolvere.

Gli utenti di WordPress hanno accesso a dei plugin di sicurezza gratuiti e premium che possono scansionare i siti web alla ricerca di file hackerati, rilevando qualsiasi codice dannoso. Alcuni tra i più popolari sono:

  • Sucuri Security, che fornisce scansioni server e remote, azioni di sicurezza post-hacking e monitoraggio dell’integrità dei file;
  • BulletProof Security, che fornisce strumenti di correzione automatica della procedura guidata di configurazione, scanner di malware, monitoraggio degli accessi e forzatura di password complesse;
  • WPScan, che supporta la scansione di sicurezza pianificata per le vulnerabilità note del core, dei plugin e dei temi di WordPress.

Altri strumenti di scansione sono compatibili con altri CMS oltre a WordPress:

  • HostedScan Security, che esegue la scansione delle vulnerabilità su reti, server e siti web;
  • Intruder, uno scanner basato su cloud che supporta la scansione delle vulnerabilità interne, esterne e cloud;
  • Detectify, che offre monitoraggio e test automatizzati delle risorse supportati da una comunità di hacker etici;
  • Immuniweb, che fornisce vari test di sicurezza del sito web aderenti agli standard GDPR e PCI DSS;
  • SiteGuarding, che supporta il monitoraggio della blocklist dei motori di ricerca, la scansione quotidiana dei file, il monitoraggio delle modifiche ai file e il rilevamento e pulizia del malware.

In alternativa è possibile fare la scansione dei file e delle tabelle del database manualmente. Si può fare con software antivirus per Pc, come McAfee e ESET, o il programma antivirus integrato nel sistema operativo (Microsoft Defender per Windows e XProtect per Mac).

Si procede quindi:

  • Scaricando tutti i file tramite il pannello di controllo dell’hosting;
  • Eseguendo una scansione completa dei file con il software antivirus scelto;
  • Risolvendo i problemi rilevati;
  • Caricando i file del sito puliti sul server;
  • Ripulendo le tabelle del database tramite PhpMyAdmin.

Se i metodi precedenti risultano troppo dispendiosi in termini di tempo si può decidere di ripristinare il file backup del sito web. In questo modo si rimuoveranno tutti i dati e le modifiche apportate alla creazione del backup. Questa opzione è consigliabile solo nel caso di siti web che non subiscono modifiche frequenti, o che possono permettersi la perdita di alcuni dati.

L’ultimo passaggio dopo aver completato il ripristino è quello di scansionare il computer per assicurarsi che qualsiasi cosa abbia compromesso il sito web non comprometta anche il computer. Abbiamo nominato alcuni antivirus, in alternativa ci sono alcune soluzioni gratuite come:

  • Antivirus gratuito AVG;
  • Avast;
  • Avira gratis;
  • Kaspersky Security Cloud;
  • Malwarebytes.

Suggerimenti per proteggere il tuo sito da attacchi hacker

  • Evita i provider di hosting economici;
  • Rimuovi il software obsoleto che non ti serve più;
  • Usa password complesse;
  • Scansiona regolarmente il tuo sito web con un software di sicurezza affidabile;
  • Esegui backup regolari del tuo sito web;
  • Installa un certificato SSL;
  • Limita i tentativi di accesso;
  • Abilita l’autenticazione a due fattori.

Se non si hanno conoscenze tecniche potrebbe risultare difficile applicare i metodi appena descritti. In questo caso ci si può affidare a esperti di sicurezza informatica e rimozione di malware da WordPress.

Come creare un’ottima struttura per una corretta pagina HTML

Una corretta struttura HTML è fondamentale per avere più possibilità di essere indicizzati dai motori di ricerca.

In questo articolo scopriremo come creare un’ottima struttura per una corretta pagina HTML.

Per prima cosa utilizziamo il <!doctype html> che serve a dire al browser, che la pagina è scritta in HTML 5.

Dopodichè apriamo il tag <html> che serve a contenere gli altri tag html.

All’interno inseriremo i tag <head> e il tag <body>.

Ci concentreremo sui tag contenuti all’interno di <head> poichè il tag <body> varia radicalmente a seconda della pagina web che si vuole creare.

Per creare un’ottima struttura per una corretta pagina HTML è necessario inserire i giusti tag all’interno della sezione <head>.

Di seguito proponiamo un’ottima struttura HTML che può essere utilizzata come base per la tua pagina web:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titolo della pagina</title>
<meta name="description" content="Descrizione della pagina web.">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="icon" type="type="image/png" href="favicon.png">
</head>
<body>
....
</body>
</html>

Abbiamo aggiunto i metatag che servono a dare importanti informazioni ai motori di ricerca oltre al tag <title>.

Il metatag <meta charset=”utf-8″> serve a definire il charset utilizzato nella pagina e di solito il più utilizzato è utf-8.

Il metatag <meta name=”viewport” content=”width=device-width, initial-scale=1″> invece è utilizzato per ottimizzare il layout da mobile della pagina web.

Il tag <titlte> invece contiene il titolo che compare nella scheda del browser (insieme alla favicon) e compare nei risultati dei motori di ricerca.

Il metatag <meta name=”description”> invece contiene la descrizione della pagina che viene mostrata dai motori di ricerca.

Il metatag <meta name=”robots” content=”index,follow”> serve a dire al motore di ricerca di “indicizzare” la pagina web e di fare “follow” (cioè seguire) le pagine presenti all’interno della pagina per andare ad indicizzare anche quelle.

Il tag <link rel=”stylesheet” type=”text/css” href=”layout.css”> serve per aggiungere un file css esterno. È sempre meglio separare i file css, in modo da avere una struttura della pagina web più organizzata.

Infine l’ultimo tag <link rel=”icon” type=”type=”image/png” href=”favicon.png”> serve a dire al browser qual è la favicon del nostro sito web. Solitamente vengono utilizzati file .ico oppure .png oppure entrambi.

Con questa semplice struttura abbiamo dato tutte le informazioni essenziali al browser, per ottimizzare al meglio la nostra pagina web.

Come creare animazioni con CSS3

È davvero possibile creare delle animazioni su una pagina web utilizzando semplicemente CSS3?

La risposta è…certo che si!

Con l’arrivo di CSS3 i web designer hanno potuto iniziare ad inserire, all’interno dei loro progetti, delle splendide animazioni che prima venivano fatto in Flash o in Javascript.

Vediamo insieme allora come funzionano le animazioni con CSS3!

Per prima cosa dobbiamo definire un’animazione e darle un nome tramite la keywork @-keyframes, ed indicare in essa quali saranno i comportamenti dell’elemento che vogliamo animare.

Supponiamo di voler creare una semplice animazione, che cambi il colore di sfondo di un elemento continuamente:

@-keyframes "change-background"{
0%{
background: "blue";
}
25%{
background: "green";
}
50%{
background: "yellow";
}
75%{
background: "orange";
}
100%{
background: "red";
}
}

La percentuale definita nell’animazione ci permette di decidere quando modificare l’elemento. In questo caso avremmo un cambio di background costante durante l’animazione, ma avremmo anche potuto decidere di far durare lo sfondo giallo più di quello arancione per esempio.

A questo punto, per poter utilizzare la nostra animazione fatta con CSS3, non ci resta altro da fare che richiamare la nostra animazione “change-background” all’interno della definizione CSS di un elemento.

Supponiamo di avere nella nostra pagina il seguente elemento HTML:

<div id="testElement">Test</div>

Benissimo per completare e vedere la nostra animazione fatta con CSS3, non ci resta altro che scrivere il seguente codice CSS:

#testElement{
width:200px;
height:200px;
border: 1px solid #000;
animation-name: change-background; /* Nome dell'animazione da richiamare */
animation-duration: 10s; /* Durata dell'animazione */
animation-animation-iteration-count: infinite; /* Numero di ripetizioni dell'animazione, possiamo infatti decidere di far partire l'animazione solo 1 volta per esempio */
animation-timing-function: linear; /* Modo in cui l'animazione viene eseguita */
}

Abbiamo visto in questo articolo quanto sia semplice creare un animazione in CSS3, infatti non ci sono limiti in termini di animazioni che si possono realizzare.

Perchè WordPress è il CMS più utilizzato al mondo?

I CMS sono strumenti software che aiutano uno web designer nella creazione e nella gestione di un sito web. Oggi, questi strumenti sono tanto avanzati che anche i più inesperti possono costruire un sito web funzionante senza una formazione informatica e senza dover scrivere una riga di codice.

Tra i CMS più avanzati, quello più conosciuto di tutti è sicuramente WordPress. Nel 2021, quasi il 40% dei web è organizzato e gestito attraverso questa piattaforma! Ma quali sono i fattori che determinano tanto successo? E’ davvero WordPress il CSM migliore sul mercato al momento?

Perché WordPress è il CMS più utilizzato?

1 – E’ open source

WordPress è una piattaforma open source… in altre parole, è gratuita! Chiunque la può scaricare sul proprio computer o server e utilizzarla per creare e gestire il proprio sito. Oltre al download gratuito, poi, WordPress – dal punto di vista del costo – offre anche numerosi altri vantaggi: non ci sono abbonamenti mensili da pagare, né fee legate alle vendite… 

2 – Versatilità

WordPress è il website builder più versatile a disposizione dei web designer. Oltre ad essere concepito in modo flessibile, le possibilità di WordPress si ampliano enormemente grazie ai plug in. 

I plug in sono funzionalità aggiuntive che svolgono azioni o permettono di gestire aspetti specifici e che possono essere installati su WordPress dal suo marketplace. Alcuni di questi plug-in sono a pagamento e altri sono gratuiti.

3 – WooCommerce

Uno dei plug-in più utilizzati è WooCommerce: una funzionalità aggiuntiva che permette di creare e gestire un ecommerce con WordPress. La disponibilità di WooCOmmerce ha fatto sì che WordPress sia il CMS più utilizzato anche in ambito ecommerce, superando addirittura piattaforme come Shopify che sono nate e costruite specificatamente per l’ecommerce management.

4 – SEO

L’ottimizzazione per i motori di ricerca dei siti web è importantissima in quanto la maggior parte del traffico in arrivo sul tuo sito arriverà proprio da essi. WordPress ha tante funzionalità che ti permettono di gestire la SEO, alle quali puoi aggiungere plug in sempre più specifici e avanzati. Tuttavia, WordPress ha già di per sé un codice pulito e ottimizzato per la SEO che migliora la visibilità dei siti costruiti su WordPress nei motori di ricerca.

Questo fa sì che, anche se si è inconsapevoli dell’ottimizzazione del codice WP, i siti costruiti su questa piattaforma tendono ad avere più successo di altri, proprio perché risultano più visibili sui motori di ricerca.

5 – Integrazioni

L’attività di un sito web è sempre accompagnata da una parallela sui social. Grazie ai plugin di WordPress, l’integrazione con i social network e l’automazione di tanti processi diventa molto più facile da gestire. Questo è un altro elemento che ha contribuito al suo successo.

Oltre alle integrazioni con i social, poi, i plug in ne permettono altre altrettanto fondamentali, come quella con gli strumenti di email marketing, advertising, e tanto altro.

Conclusioni

Tutti i fattori che abbiamo utilizzato hanno fatto sì che WordPress sia oggi il CSM più utilizzato in tutto il mondo. All’inizio dell’articolo, ci siamo chiesti se fosse davvero il migliore tra gli strumenti in circolazione, e la nostra analisi sembra aver dato risposta affermativa: WordPress è il CMS più facile da utilizzare, più completo e versatile, ed è anche open source!

Impostare un colore o un’immagine di sfondo con i fogli di stile CSS

Per gestire la parte grafica di una pagina web è fondamentale conoscere i fogli di stile CSS.

Grazie a questi speciali fogli è possibile gestire ogni singolo aspetto, di ogni singolo elemento presente sulla pagina. Dimensione e colore del carattere, colore di sfondo, animazioni e molto altro.

Impostare lo sfondo di un elemento è semplice. Ci basta utilizzare le proprietà background-color o background-image o più semplicemente background.

Per impostare un colore di sfondo (rosso ad esempio) ci basta utilizzare il seguente codice:

#contenitore{
   background-color: #ff00000;
}

Il testo “#ff0000” indica il codice esadecimale del colore rosso. Ma con i CSS possiamo utilizzare anche i colori RGB oppure scrivere semplicemente il nome del colore in inglese (nel nostro esempio avremmo dovuto scrivere “red”).

Per impostare invece un’immagine di sfondo basta specificare l’url dell’immagine:

#contenitore{
background-image: url('percorso/verso/immagine/sfondo.jpg');
}

Grazie poi a diverse proprietà come background-repeat, background-position e molte altre, possiamo gestire il comportamento dell’immagine di sfondo.