Target = "_blank" e altri valori dell'attributo target. Target valido="_blank" Motivo errato: pagina con scorrimento infinito
Leggi anche
Molti siti utilizzano la pratica di aprire i collegamenti esterni in una nuova finestra. Spesso in questo modo si aprono ad esempio link ai siti web degli sviluppatori o ai risultati dei motori di ricerca. In genere, ciò viene fatto utilizzando l'attributo tag< >:
In generale, dire all'utente come aprire un collegamento non è carino. I guru dell'usabilità dei siti web affermano all'unanimità che l'utente stesso è in grado di decidere come aprire il collegamento. Sistemerà le sue finestre senza la nostra volontà in merito. Inoltre, interromperemo anche la funzionalità del pulsante “Indietro” del browser standard. Un’interferenza così brutale con le abitudini rischia di causare ostilità!
Inoltre si crea una cattiva impressione: “L'utente sta abbandonando il sito! Potrebbe non tornare mai più qui! Ah ah ah! Cosa fare? Apriamo un nuovo collegamento in un'altra finestra! Forse, quando avrà visto tutto ciò di cui ha bisogno, chiudendo questa finestra, verrà di nuovo da noi e diventerà sicuramente un visitatore abituale!”
Il significato, spero, sia chiaro: riempi il sito con contenuti di alta qualità, utili e interessanti e poi i visitatori torneranno consapevolmente e in modo indipendente.
Tuttavia, oltre al lato morale, c'è anche un lato tecnico della questione: l'attributo target non è presente nelle specifiche XHTML 1.0 Strict e, di conseguenza, non supererà la convalida!
Soluzione valida: JavaScript
Se, nonostante i paragrafi precedenti, hai comunque deciso (o sei stato costretto) ad aprire la pagina in una nuova finestra, facciamolo almeno correttamente.
È qui che JavaScript viene in soccorso. Proviamo ad intercettare l'evento onclick del collegamento e forzare l'apertura di una nuova finestra utilizzando la funzione window.open(). Quindi proibiremo di seguire il collegamento nella finestra nativa specificando return false:
Il collegamento si aprirà in una nuova finestra
Controlliamo la soluzione risultante: .
È tutto bellissimo. I browser aprono con sicurezza il collegamento in una nuova finestra. Il validatore ci soddisfa con un messaggio verde di successo. Sembrerebbe che tu possa calmarti, ma non è così! Proviamo a impostare un blocco popup rigido nel tuo browser e a fare nuovamente clic sul collegamento!
Una soluzione migliore
I blocchi pop-up sono progettati principalmente per combattere gli annunci fastidiosi. Questa funzionalità è disponibile in tutti i browser moderni. Alcuni browser offrono anche diversi livelli di blocco. Ad esempio, in Opera 9+ puoi bloccare solo le finestre "indesiderate" o tutto.
Non so quale percentuale di utenti abbia difficoltà in modo così radicale con i pop-up, ma solo con queste impostazioni, invece di aprire la finestra, apparirà semplicemente un piccolo messaggio "la finestra pop-up è bloccata". Inoltre, anche questa manifestazione della risposta del browser al clic può essere disabilitata nelle impostazioni. In questo caso, il collegamento perderà semplicemente funzionalità: "Clicco, ma non succede nulla!"
Se, dopo aver letto questo, qualcuno dicesse: “Non si può accontentare tutti! Ebbene, chi è il loro medico, che per loro è tutto spento!”, allora non siamo sulla stessa strada con queste persone. Per il resto continueremo.
Il collegamento si aprirà in una nuova finestra
Qui abbiamo approfittato del fatto che la funzione window.open() restituisce true se la finestra è stata aperta con successo e false altrimenti. Cioè, nel caso in cui il collegamento si sia aperto con successo in una nuova finestra, blocchiamo l'apertura del collegamento nella sua stessa finestra, perché il risultato sarà!true=false. E viceversa, se non è possibile aprire la finestra, return true consentirà al collegamento di funzionare normalmente.
La maggior parte degli sviluppatori web non si rende nemmeno conto:
La pagina a cui ci colleghiamo utilizzando target="_blank" accede alla pagina sorgente tramite l'oggetto window.opener.
Ad esempio, in questo modo una scheda appena aperta può cambiare window.opener.location, ovvero Invece della scheda precedente, carica tranquillamente una pagina completamente diversa.
La cosa peggiore è che questa vulnerabilità è presente su molti siti popolari nazionali ed esteri: mentre su Facebook è stata risolta pochi giorni fa, funziona ancora, ad esempio, su Yandex.Mail.
Esempio di attacco
In base a questo comportamento dei browser, puoi creare molti scenari, ecco quello più semplice:
1. Alla vittima viene inviata un'e-mail, possibilmente da un indirizzo falso. Il contenuto della lettera è del tutto irrilevante: l'importante è costringere la vittima a seguire un collegamento con codice dannoso. Ad esempio, potrebbe trattarsi di una richiesta di dare un'occhiata a gatti carini come quello qui sotto. Yandex aggiunge automaticamente Target="_blank" a tutte le e-mail.
2. La vittima apre una lettera in Yandex.Mail, clicca su un collegamento, che apre in una nuova scheda un sito nascosto che esegue codice dannoso che, al posto di Yandex.Mail, carica un sito di phishing molto simile a quello originale, ma , ad esempio, ti chiede di reinserire nome utente e password e inoltre, per eliminare i sospetti, reindirizza effettivamente a cats.
Un esempio di questo codice:
// Sostituzione dell'originale Yandex.Mail con uno falso window.opener.location = "http://e-m-a.il/yandex.ru"; // Reindirizza ai gatti per rimuovere il sospetto window.location = "https://imgur.com/0A5ZGBN";
3. La vittima, che si fida di Yandex e guarda i gatti, torna alla scheda precedente con la posta. Dal momento che non ha aperto nulla e non ha cambiato l'indirizzo, molto probabilmente si innamorerà del falso e inserirà il suo nome utente e la password, che verranno effettivamente inviati all'aggressore.
L'unica cosa che potrebbe destare sospetti è che la pagina ha un indirizzo diverso, ma può essere reso molto simile a quello originale, e sui dispositivi mobili spesso è nascosto per impostazione predefinita.
Trattamento
Fortunatamente, puoi risolvere tutto abbastanza facilmente: devi aggiungere inoltre l'attributo rel="noopener noreferrer" a tutti i collegamenti con target="_blank" .
Se non hai intenzione di aspettare che questo problema venga risolto su siti Web e browser, ti consigliamo di aggiungere il seguente script utente al tuo TamperMonkey/GreaseMonkey:
// ==UserScript== // @name NULL Oggetto Opener // @namespace nullopenerobjectns // @description Cancella l'oggetto window.openeer. // @version 1 // @grant none // @run-at document-start // ==/UserScript== (function() ( "use strict"; window.opener = null; ))();
Per impostazione predefinita, quando si fa clic su un collegamento, il documento si apre nella finestra o nel frame corrente. Se necessario, questa condizione può essere modificata dall'attributo target del tag . Questo attributo non è consentito in XHTML.
Sintassi
...Attributo obbligatorio
Valori
Il valore è il nome della finestra o del frame specificato dall'attributo name. Se viene impostato un nome inesistente verrà aperta una nuova finestra. I seguenti vengono utilizzati come nomi riservati.
Vuoto Carica la pagina in una nuova finestra del browser. _self Carica una pagina nella finestra corrente. _parent Carica la pagina nel frame genitore; se non ci sono frame, questo valore funziona come _self . _top Scarta tutti i frame e carica la pagina in una finestra del browser completa; se non ci sono frame, questo valore funziona come _self .
Valore di default
Validazione
L'uso di questo attributo è condannato dalle specifiche HTML e si ottiene codice valido solo quando si utilizza una transizione .
HTML5 IE Cr Op Sa Fx
Apri in una nuova finestra
target="_blank viene utilizzato per creare il tag ha aperto il collegamento in una nuova finestra. Ma cos'è l'HTML di destinazione? Perché dovrebbe essere vuoto? E la cosa più interessante è: perché c'è un trattino basso all'inizio? Diamo un'occhiata più da vicino a questo codice e capiamo cosa fa.
attributo di destinazione
Valori obiettivo
I quattro valori più comuni per l'attributo target sono:
_se stesso
L'unica situazione in cui ciò può accadere è se il tag viene utilizzato nell'HTML
_vuoto
Apre un collegamento in una nuova scheda o finestra. Ciò è determinato dalle impostazioni locali dell'utente, nella maggior parte dei browser si tratta di una nuova scheda. Potresti pensare che utilizzando questo valore puoi implementare unità pubblicitarie pop-up. Ma non è vero. Molto spesso, a questo scopo viene utilizzato JavaScript anziché HTML.
Questo valore dell'attributo HTML di destinazione è utilizzato al meglio per aprire collegamenti a siti esterni o file PDF in una nuova scheda. Grazie a ciò, dopo aver chiuso queste schede, l'utente viene riportato al tuo sito. Ma non bisogna abusarne, poiché sarà piuttosto difficile per l'utente navigare se ogni collegamento si apre in una nuova scheda.
_genitore
Il valore _parent apre un collegamento nel frame principale per il frame in cui ti trovi. Questo non è un valore popolare, poiché i tag per la creazione di frame