PROGETTARE LA FUNZIONALITA’ DI MODIFICA
INSTALLARE UN EDITOR WYSIWYG
Al momento per la descrizione abbiamo usato una normalissima Text Area. Questo potrebbe non andare bene perché se il docente volesse spiegare in maniera esaustiva i contenuti del suo corso non ne avrebbe la possibilità. Sostituiamo la casella di testa con un editor, quindi poter usare sottotitoli, mettere caratteri in grassetto etc. Vedremo che un editor WYSIWYG può anche rappresentare dei rischi per la sicurezza. La Text Area rimarrà all’interno del form, un editor non ha lo scopo di sostituirla, piuttosto di integrarla.
L’utente tramite l’editor formatta i contenuti in HTML, quando avrà terminato i contenuti verranno riversati nella Text Area. L’editor che useremo è Summernote, si integra con Bootstrap. Andiamo al seguente indirizzo https://summernote.org/getting-started/ – for-bootstrap-5 I file che scarichiamo non devono essere messi nella View di Layout perché tutte le viste possono accedere a questi file, piuttosto li metteremo esclusivamente dove viene utilizzato l’editor. Creiamo una nuova partial view _Summernote. Questo è il codice.
HTML ENTITIES
Nel momento in cui salviamo il contenuto della descrizione modificato e formattato in HTML, il contenuto stesso viene riversato nella Text Area di dettaglio del corso. Tuttavia, l’engine Razor rende inoffensivo quel codice HTML stampando dei caratteri speciali chiamati HTML Entities. Vediamo con una slide come funziona e come risolvere il problema.
PREVENIRE GLI ATTACCHI CROSS-SITE SCRIPTING (XSS)
Anche se limitiamo il numero di pulsanti dell’editor gli utenti malintenzionati possono comunque modificare il codice HTML prodotto. Si può ad esempio inserire un tag script con del codice Javascript arbitrario. Aprendo gli strumenti del Browser, andando sulla tab Elements cercando la Text Area possiamo inserire ad esempio un alert, il minore dei mali, fastidioso ma non nocivo.
Se posso inserire del Javascript, quando l’utente ha fatto il login si possono rubare i dati personali di quell’utente, nome, cognome e perché no la carta di credito. Questo è il motivo per cui quando facciamo acquisti non viene mai mostrato il numero di carta nella sua interezza, ma ad esempio solo le ultime quattro cifre. Può aggiungere Ads, cioè pubblicità e trarne profitto. Inoltre, con XSS si possono iniettare malware sfruttando vulnerabilità note dei vari Browser.
Vediamo che il codice malevolo, anche se in questo caso è un semplice alert viene memorizzato nel database e visualizzato agli utenti nella pagina di dettaglio.
Andiamo a vedere ora un paio di punti in cui possiamo intervenire. Il primo è prima che il dato finisce nel database, facendo sanitizzazione, ossia ripulendo il contenuto dai tag script, oppure facciamo validazione, rispediamo il form all’utente e lo informiamo.
Per completezza opereremo la sanitizzazione in un altro punto, anche se è più rischioso perché se dobbiamo visualizzare il contenuto del database su un’altra View dobbiamo ricordarci di fare la sanitizzazione. Lasciamo che il codice Javascript finisca nel database e solo quando visualizziamo quella descrizione sanitizziamo l’input.
PROTEGGERSI DAGLI ATTACCHI DI CROSS SITE SCRIPTING (XSS)
Nel nostro caso per proteggere l’applicazione abbiamo utilizzato un componente HtmlSanitizer e creato un tag helper HtmlSanitizeTagHelper.cs che ho riutilizzato nelle view di edit e di dettaglio del corso. Questo è il codice.
CARICARE UN FILE DAL FORM
In alcune situazioni abbiamo bisogno che l’utente carichi uno o più file scegliendoli dal proprio Hard Disk. Nel nostro caso sarà l’immagine del corso, anche in questo caso faremo validazione perché l’utente potrebbe caricare un eseguibile, un file zip etc. Nel form di Edit dobbiamo utilizzare l’attributo enctype=”multipart/form-data” che si rende necessario quando dobbiamo caricare un file binario.
Vediamo le modifiche da apportare per caricare un’immagine. L’attributo asp-for=”Image” sarà di tipo IFormFile.
Questo è codice del Form di Edit.
LINK AL CODICE SU GITHUB
Scaricare il codice della sezione15 oppure il ramo master oppure clonare il repository GITHUB per avere a disposizione tutte le sezioni nel tuo editor preferito.
Scrivi un commento