Skip to main content

ERR_BLOCKED_BY_XSS_AUDITOR in Google Chome – Come risolvere

Con l’uscita della recente versione 57 del browser Google Chrome la funzionalità di XSS auditing ha subito alcuni importanti miglioramenti, che di certo comporteranno una maggiore protezione per gli utenti più inclini ad essere soggetti ad attacchi di tipo XSS (Cross-Site Scripting – se non sapete di cosa si tratta, leggete qui). Sfortunatamente, questa modifica ha comportato anche il malfunzionamento di alcuni servizi online, che da qualche settimana restituiscono il seguente errore HTTP:

ERR_BLOCKED_BY_XSS_AUDITOR

Il problema è quasi sempre legato alla presenza di un contenuto HTML inviato tramite POST all’interno di una request tramite form o AJAX, tecnica utilizzata da servizi anche molto diffusi nel panorama web moderno – editor WYSIWYG, uploader interattivi, strumenti di real-time editing tipici di molti CMS e così via.

La domanda a questo punto nasce spontanea: come risolvere questo problema e ripristinare il funzionamento del servizio?

Nel caso in cui si tratti di uno strumento sviluppato da terze parti, la cosa migliore da fare è probabilmente segnalare la funzionalità agli sviluppatori e/o controllare se esiste una patch recente in grado di risolvere il problema. Se questo tentativo non si rivela efficace, o se il problema si verifica su uno script o servizio sviluppato da noi, occorre invece rimboccarsi le maniche e darsi da fare per risolvere il problema. E’ quanto mi è toccato fare la settimana scorsa, quando mi sono trovato a dover applicare un fix d’urgenza a uno strumento che avevo sviluppato per un amico qualche tempo fa: un viewer di fatture elettroniche in grado di interpretare – e mostrare a schermo – il formato più recente previsto dagli standard della Pubblica Amministrazione, rilasciato al pubblico nel 2016 e già utilizzato da moltissime aziende e professionisti in Italia. (altro…)

 

Input type number in HTML5 con supporto numeri decimali con virgola

Tra le moltissime funzioni utili introdotte dallo standard HTML5, una delle più utili è quella che consente di impostare una tipologia di dato agli elementi <input>: color, date, datetime-local, email, month, number, range, search, tel, time, url e week. Ciascuna di loro attiva un componente specifico del browser che consente all’utente di selezionare il valore desiderato in modo estremamente user-friendly, rendendo finalmente superflui tutti quei plugin jQuery, jQuery UI, Bootstrap et. al. che fino ad alcuni anni fa erano l’unico modo per ottenere lo stesso effetto… al costo però di appesantire notevolmente la componente client-side delle nostre pagine web. (altro…)

 

WordPress: Tema o Plugin non più funzionanti? Attenzione ai riferimenti JS o CSS duplicati

Ormai sappiamo tutti come funzionano le tipiche installazioni di WordPress: si inizia con un Tema che sembra particolarmente efficace, si aggiunge una manciata di Plugin indispensabili come Jetpack, Contact Form 7, il pacchetto YOAST per gestire Google Analytics e la parte SEO e grossomodo si pensa che sia finita lì. Dopo tutto abbiamo bisogno di un semplice blog, giusto? Inutile appesantirlo con roba superflua.

Poi si comincia a riflettere sul fatto che sarebbe bello dotare i nostri utenti di una newsletter: per fortuna esiste MailPoet, che si occupa proprio di questo. E non passa molto tempo prima che arrivi la voglia di inserire qualche galleria di immagini qui e là, esigenza che viene facilmente soddisfatta dalle miriadi di plugin che offrono ogni sorta di slider e carousel con cui arricchire pagine e articoli. E cosa c’è di meglio di BuddyPress per gestire la community, o di WooCommerce per vendere prodotti? E a chi non interessa poter dare ai propri utenti la possibilità di accedere ai file condivisi tramite Google Drive o Dropbox sfruttando uno dei tanti Download Manager a disposizione?

Tanto vale ammetterlo: nessuno installa WordPress per fare un semplice blog. Al contrario, il motivo per cui si sceglie WordPress è proprio perché si ha l’esigenza di mettere in piedi un sito dalle funzionalità complesse mantenendole sotto controllo grazie a una piattaforma robusta e modulare. C’è forse qualcosa di male in questo? Assolutamente no. Tranne quando, tra i numerosi plugin che si andrà inevitabilmente ad installare, ve ne saranno alcuni che aggiungeranno le medesime librerie js o css di uso comune (jQuery, Bootstrap, MooTools etc.) al nostro sito.

(altro…)

 

Jquery.scrolling: controllare la comparsa e la scomparsa degli elementi nel Viewport

Con l’affermarsi del responsive design e dei layout adattivi diventa sempre più importante tenere traccia della presenza degli elementi man mano che essi diventano visibili all’interno del viewport, ovvero della zona del browser visibile all’utente. Sfortunatamente né il linguaggio javascript né il popolare framework jquery mettono a disposizione un modo nativo per controllare lo stato degli elementi HTML in conseguenza dello scroll della pagina.

Per rispondere a questa esigenza ho sviluppato il plugin jquery.scrolling, che può essere utilizzato proprio per assolvere a tale compito. Il plugin consente infatti di disporre di due eventi, scrollin e scrollout, che si attivano rispettivamente quando un elemento entra o esce dall’area di visualizzazione del viewport.

Gli eventi si attivano in conseguenza di uno scroll o di un resize, ma possono anche essere attivati manualmente nel caso di contenuto generato dinamicamente, ad esempio a seguito di chiamate AJAX. Il plugin supporta infatti ogni tipo di contenuto presente all’interno del DOM della pagina ovvero all’interno di frame o iframe in essa presenti.

(altro…)

 

Utilizzare JQuery UI e Bootstrap nella stessa pagina web

Gli ultimi mesi hanno visto una diffusione capillare del framework Bootstrap, una libreria CSS/JS che consente di dotare qualsiasi sito web di tutte le funzionalità necessarie per rendere le proprie pagine mobile-friendly e, cosa ancor più importante, pienamente compatibili con tutti i device. Il Framework, oggi giunto alla versione 3.3.1, è dotato di una serie di plugin javascript che richiedono JQuery v1.9.0 o superiore: è quindi facile immaginare come si sia diffuso principalmente sui siti che includono quest’ultimo, i quali non di rado ospitano anche JQuery UI.

Utilizzare questi due framework insieme è possibile, ma occorre fare attenzione ad almeno due conflitti presenti tra le due librerie e che rischiano di produrre errori JS e/o di compromettere alcune funzionalità del sito. Si tratta dei plugin tooltip e button, entrambi presenti (con il medesimo nome) in ciascuna delle librerie.

Il Problema.

Prendiamo come esempio il plugin tooltip. Andiamo sul sito http://jqueryui.com/tooltip/ e diamo un’occhiata al codice di esempio (view source) per la creazione di un tooltip con JQuery UI:

Il testo evidenziato presenta una chiamata alla funzione tooltip che JQuery UI aggiunge a livello runtime per ogni oggetto JQuery. La stessa operazione viene effettuata da Bootstrap come si può vedere analizzando il codice del relativo tutorial:

Questo conflitto di nomi, oltre ad impedire a entrambi i plugin di funzionare, provoca una serie di errori Javascript variabili a seconda di quale libreria viene eseguita prima. Nel caso in cui Boostrap sia inserito dopo JQuery UI, ad esempio, l’errore che vedremo nella nostra Console Javascript sarà con tutta probabilità il seguente:

Uncaught TypeError: Cannot read property ‘documentElement’ of null

Dovuto al fatto che la sintassi del plugin di JQueryUI, solitamente utilizzato a livello di $(document), viene utilizzata per eseguire il plugin di Bootstrap.

 La Soluzione.

Il modo migliore per far convivere le due librerie risolvendo “in positivo” i conflitti di nomi è utilizzare il plugin $.widget.bridge che consente di poter ridefinire a piacimento questi ultimi. Il plugin è fortunatamente incluso all’interno di JQuery UI, quindi non appesantirà ulteriormente il nostro sito. Il suo utilizzo è molto semplice:

Queste istruzioni vanno ovviamente inserite nella pagina in modo sincrono dopo aver incluso il riferimento alla libreria JQueryUI e prima dello script di Bootstrap. Nell’esempio seguente vediamo un esempio completo di implementazione nel blocco <head> di una pagina web:

In conseguenza di questa operazione i metodi tooltip e button diventeranno una prerogativa di Bootstrap, mentre per utilizzare gli omonimi plugin offerti da JQuery UI sarà necessario utilizzare i nuovi alias uitooltip e uibutton.

Riferimenti:
http://stackoverflow.com/a/27745464/1233379 (la mia risposta sul sito StackOverflow che ha ispirato questo post).