Τρόπος χρήσης HTML για άνοιγμα συνδέσμου σε νέα καρτέλα

Οι καρτέλες είναι υπέροχες, έτσι δεν είναι; Επιτρέπουν στο multitasker σε όλους μας να κάνουμε ταλέντο με πολλές διαδικτυακές εργασίες ταυτόχρονα.

Οι καρτέλες είναι τόσο συχνές τώρα που, όταν κάνετε κλικ σε έναν σύνδεσμο, είναι πιθανό να ανοίξουν σε μια νέα καρτέλα.

Εάν αναρωτηθήκατε ποτέ πώς να το κάνετε αυτό με τους δικούς σας συνδέσμους, έχετε έρθει στο σωστό μέρος.

Το στοιχείο άγκυρας

Για να δημιουργήσετε έναν σύνδεσμο σε μια ιστοσελίδα, πρέπει να τυλίξετε ένα στοιχείο (κείμενο, μια εικόνα και ούτω καθεξής) σε ένα στοιχείο αγκύρωσης ( ) και να ορίσετε το hrefχαρακτηριστικό του στη διεύθυνση URL στην οποία θέλετε να συνδέσετε.

Check out freeCodeCamp.

Δείτε το δωρεάνCodeCamp.

Εάν κάνετε κλικ στον παραπάνω σύνδεσμο, το πρόγραμμα περιήγησης θα ανοίξει τον σύνδεσμο στο τρέχον παράθυρο ή στην καρτέλα. Αυτή είναι η προεπιλεγμένη συμπεριφορά σε κάθε πρόγραμμα περιήγησης.

Για να ανοίξετε έναν σύνδεσμο σε μια νέα καρτέλα, θα πρέπει να εξετάσουμε μερικά από τα άλλα χαρακτηριστικά των άλλων χαρακτηριστικών του στοιχείου αγκύρωσης.

Το χαρακτηριστικό στόχος

Αυτό το χαρακτηριστικό λέει στο πρόγραμμα περιήγησης πώς να ανοίξει τον σύνδεσμο.

Για να ανοίξετε έναν σύνδεσμο σε μια νέα καρτέλα, απλώς ορίστε το targetχαρακτηριστικό σε _blank:

Check out freeCodeCamp.

Τώρα, όταν κάποιος κάνει κλικ στον σύνδεσμο, θα ανοίξει σε μια νέα καρτέλα ή πιθανώς σε ένα νέο παράθυρο, ανάλογα με τις ρυθμίσεις του προγράμματος περιήγησης του ατόμου.

Θέματα ασφάλειας με target="_blank"

Συνιστώ ανεπιφύλακτα να προσθέτετε πάντα rel="noreferrer noopener"στο στοιχείο αγκύρωσης όποτε χρησιμοποιείτε το targetχαρακτηριστικό:

Check out freeCodeCamp.

Αυτό έχει ως αποτέλεσμα την ακόλουθη έξοδο:

Δείτε το δωρεάνCodeCamp.

Το relχαρακτηριστικό ορίζει τη σχέση μεταξύ της σελίδας σας και του συνδεδεμένου URL. Η noopener noreferrerρύθμισή του είναι να αποφευχθεί ένας τύπος ηλεκτρονικού ψαρέματος που είναι γνωστός ως καρτέλα.

Τι είναι η καρτέλα;

Η καρτέλα Tabnabbing, που μερικές φορές ονομάζεται αντίστροφη καρτέλα, είναι μια εκμετάλλευση που χρησιμοποιεί την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης για target="_blank"να αποκτήσει μερική πρόσβαση στη σελίδα σας μέσω του window.objectAPI.

Με την καρτέλα tabnabbing, μια σελίδα στην οποία συνδέεστε θα μπορούσε να προκαλέσει την ανακατεύθυνση της σελίδας σας σε μια πλαστή σελίδα σύνδεσης. Αυτό θα ήταν δύσκολο για τους περισσότερους χρήστες να το παρατηρήσουν επειδή η εστίαση θα ήταν στην καρτέλα που μόλις άνοιξε - όχι στην αρχική καρτέλα με τη σελίδα σας.

Στη συνέχεια, όταν ένα άτομο επιστρέψει στην καρτέλα με τη σελίδα σας, θα έβλεπε την ψεύτικη σελίδα σύνδεσης και θα μπορούσε να εισάγει τα στοιχεία σύνδεσής του.

Αν σας ενδιαφέρει να μάθετε περισσότερα για το πώς λειτουργεί το tabnabbing και τι κακοί ηθοποιοί μπορούν να κάνουν με το exploit, ρίξτε μια ματιά στο άρθρο του Alex Yumashev και αυτό από το OWASP.

Εάν θέλετε να δείτε ένα χρηματοκιβώτιολειτουργικό παράδειγμα, ρίξτε μια ματιά σε αυτήν τη σελίδα και το GitHub repo για περισσότερες πληροφορίες σχετικά με το exploit και το relχαρακτηριστικό.

Συνοψίζοντας

Είναι εύκολο να χρησιμοποιήσετε HTML για να ανοίξετε έναν σύνδεσμο σε μια νέα καρτέλα. Χρειάζεστε απλώς ένα στοιχείο αγκύρωσης ( ) με τρία σημαντικά χαρακτηριστικά:

  1. Το hrefχαρακτηριστικό ορίστηκε στη διεύθυνση URL της σελίδας στην οποία θέλετε να συνδέσετε
  2. Το targetχαρακτηριστικό έχει οριστεί σε _blank, το οποίο λέει στο πρόγραμμα περιήγησης να ανοίξει το σύνδεσμο σε μια νέα καρτέλα / παράθυρο, ανάλογα με τις ρυθμίσεις του προγράμματος περιήγησης
  3. Το relχαρακτηριστικό ορίστηκε για noreferrer noopenerτην αποτροπή πιθανών κακόβουλων επιθέσεων από τις σελίδες στις οποίες συνδέεστε

Και πάλι, εδώ είναι το παράδειγμα εργασίας HTML:

Check out freeCodeCamp.

Που οδηγεί στην ακόλουθη έξοδο στο πρόγραμμα περιήγησης:

Δείτε το δωρεάνCodeCamp.

Ευχαριστώ και πάλι για την ανάγνωση. Καλή κωδικοποίηση.