HTML: n käyttäminen linkin avaamiseen uudella välilehdellä

Välilehdet ovat hienoja, eikö olekin? Ne antavat meidän kaikkien monitoimilaitteelle mahdollisuuden harrastaa joukkoa online-tehtäviä samanaikaisesti.

Välilehdet ovat nyt niin yleisiä, että kun napsautat linkkiä, se todennäköisesti avautuu uudelle välilehdelle.

Jos olet koskaan miettinyt, miten se tehdään omilla linkeillä, olet tullut oikeaan paikkaan.

Ankkuri-elementti

Jos haluat luoda linkin verkkosivulle, sinun on käärittävä elementti (teksti, kuva ja niin edelleen) ankkuri ( ) -elementtiin ja asetettava sen hrefattribuutti URL-osoitteeksi, johon haluat linkittää.

Check out freeCodeCamp.

Tutustu freeCodeCampiin.

Jos napsautat yllä olevaa linkkiä, selain avaa linkin nykyisessä ikkunassa tai välilehdessä. Tämä on jokaisen selaimen oletuskäyttäytyminen.

Linkin avaamiseksi uudessa välilehdessä meidän on tarkasteltava joitain muita ankkurielementin muiden määritteiden attribuutteja.

Kohdeominaisuus

Tämä attribuutti kertoo selaimelle, kuinka linkki avataan.

Jos haluat avata linkin uudessa välilehdessä, määritä targetmääritteeksi seuraava _blank:

Check out freeCodeCamp.

Nyt kun joku napsauttaa linkkiä, se avautuu uudelle välilehdelle tai mahdollisesti uudelle ikkunalle henkilön selainasetuksista riippuen.

Turvallisuusongelmat target="_blank"

Suosittelen, että lisäät aina rel="noreferrer noopener"ankkurielementtiin aina, kun käytät targetmääritettä:

Check out freeCodeCamp.

Tuloksena on seuraava tulos:

Tutustu freeCodeCampiin.

relAttribuuttijoukot suhdetta sivusi ja linkitetty osoite. Sen asettaminen noopener noreferreron estää tietokalastelun tyyppi, joka tunnetaan nimellä tabnabbing.

Mikä on tabinabbing?

Välilehtien napauttaminen, jota joskus kutsutaan käänteiseksi välilehdeksi, on hyväksikäyttö, joka käyttää selaimen oletuskäyttäytymistä target="_blank"saadakseen osittaisen pääsyn sivullesi window.objectAPI: n kautta .

Välilehtien avulla sivu, johon linkität, saattaa aiheuttaa sivusi uudelleenohjauksen väärennetylle kirjautumissivulle. Tätä olisi useimmille käyttäjille vaikea huomata, koska painopiste olisi juuri avautuneessa välilehdessä - ei alkuperäisessä välilehdessä sivusi kanssa.

Sitten, kun henkilö siirtyy takaisin välilehdelle sivusi kanssa, hän näkee väärennetyn kirjautumissivun ja saattaa syöttää kirjautumistietonsa.

Jos olet kiinnostunut oppimaan lisää siitä, miten tabinabbing toimii ja mitä huonot näyttelijät voivat tehdä hyödyntämisen kanssa, tutustu Alex Yumashevin artikkeliin ja tähän OWASP: n artikkeliin.

Jos haluat nähdä kassakaapintoimiva esimerkki, katso tämä sivu ja sen GitHub-repo saadaksesi lisätietoja hyödyntämisestä ja relmääritteestä.

Yhteenvetona

HTML-koodin avulla on helppo avata linkki uudessa välilehdessä. Tarvitset vain ankkuri ( ) elementin, jolla on kolme tärkeää määritettä:

1. hrefMäärite asetetaan URL sivun haluat linkin
2. targetMäärite on _blank, joka kertoo selaimen avata linkin uuteen välilehteen / ikkunaan, riippuen selaimen asetuksista
3. relMäärite asetettu noreferrer noopenerestämään mahdollinen hyökkäyksiä päässä sivujen linkki

Jälleen tässä on toimiva esimerkki HTML:

Check out freeCodeCamp.

Mikä johtaa seuraavaan selaimen tulokseen:

Tutustu freeCodeCampiin.

Kiitos vielä kerran lukemisesta. Hyvää koodausta.