วิธีใช้ HTML เพื่อเปิดลิงก์ในแท็บใหม่

แท็บดีมากใช่ไหม พวกเขาอนุญาตให้ผู้ทำงานหลายคนในพวกเราทุกคนเล่นกลกับงานออนไลน์จำนวนมากในเวลาเดียวกัน

แท็บเป็นเรื่องปกติมากในตอนนี้เมื่อคุณคลิกที่ลิงก์มีแนวโน้มว่าแท็บจะเปิดขึ้นในแท็บใหม่

หากคุณเคยสงสัยว่าจะทำอย่างไรกับลิงก์ของคุณเองคุณมาถูกที่แล้ว

องค์ประกอบ Anchor

ในการสร้างลิงก์บนหน้าเว็บคุณต้องรวมองค์ประกอบ (ข้อความรูปภาพและอื่น ๆ ) ในองค์ประกอบจุดยึด ( ) และตั้งค่าhrefแอตทริบิวต์เป็น URL ที่คุณต้องการเชื่อมโยง

Check out freeCodeCamp.

ตรวจสอบ freeCodeCamp

หากคุณคลิกที่ลิงค์ด้านบนเบราว์เซอร์จะเปิดลิงค์ในหน้าต่างหรือแท็บปัจจุบัน นี่เป็นลักษณะการทำงานเริ่มต้นในทุกเบราว์เซอร์

หากต้องการเปิดลิงก์ในแท็บใหม่เราจะต้องดูคุณสมบัติอื่น ๆ ของแอตทริบิวต์อื่น ๆ ขององค์ประกอบจุดยึด

แอตทริบิวต์เป้าหมาย

แอตทริบิวต์นี้บอกเบราว์เซอร์ว่าจะเปิดลิงก์ได้อย่างไร

หากต้องการเปิดลิงก์ในแท็บใหม่เพียงตั้งค่าtargetแอตทริบิวต์เป็น_blank:

Check out freeCodeCamp.

ตอนนี้เมื่อมีคนคลิกที่ลิงค์ลิงก์นั้นจะเปิดขึ้นในแท็บใหม่หรืออาจเป็นหน้าต่างใหม่ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ของบุคคลนั้น

ข้อกังวลด้านความปลอดภัยด้วย target="_blank"

ฉันขอแนะนำอย่างยิ่งให้คุณเพิ่มลงrel="noreferrer noopener"ในองค์ประกอบจุดยึดทุกครั้งที่คุณใช้targetแอตทริบิวต์:

Check out freeCodeCamp.

ผลลัพธ์นี้ได้ผลลัพธ์ต่อไปนี้:

ตรวจสอบ freeCodeCamp

relแอตทริบิวต์กำหนดความสัมพันธ์ระหว่างหน้าและ URL ที่เชื่อมโยงของคุณ การตั้งค่าnoopener noreferrerเป็นเพื่อป้องกันฟิชชิงประเภทหนึ่งที่เรียกว่าแท็บนาบบิง

Tabnabbing คืออะไร?

Tabnabbing บางครั้งเรียกว่า reverse tabnabbing เป็นการใช้ประโยชน์จากพฤติกรรมเริ่มต้นของเบราว์เซอร์target="_blank"เพื่อเข้าถึงเพจของคุณบางส่วนผ่านwindow.objectAPI

ด้วยการใช้แท็บเพจที่คุณลิงก์ไปอาจทำให้เพจของคุณเปลี่ยนเส้นทางไปยังหน้าล็อกอินปลอม สิ่งนี้จะยากสำหรับผู้ใช้ส่วนใหญ่ที่จะสังเกตเห็นเนื่องจากโฟกัสจะอยู่ที่แท็บที่เพิ่งเปิดไม่ใช่แท็บเดิมกับเพจของคุณ

จากนั้นเมื่อบุคคลเปลี่ยนกลับไปที่แท็บด้วยเพจของคุณพวกเขาจะเห็นหน้าล็อกอินปลอมแทนและอาจป้อนรายละเอียดการเข้าสู่ระบบของตน

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของแท็บเล็ตและตัวแสดงที่ไม่ดีสามารถทำอะไรได้บ้างกับการหาประโยชน์โปรดดูบทความของ Alex Yumashev และบทความนี้โดย OWASP

หากต้องการดูตู้เซฟตัวอย่างการทำงานตรวจสอบหน้านี้และที่เก็บ GitHub สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ประโยชน์และrelแอตทริบิวต์

สรุป

ง่ายต่อการใช้ HTML เพื่อเปิดลิงก์ในแท็บใหม่ คุณเพียงแค่ต้องมีองค์ประกอบanchor ( ) ที่มีคุณสมบัติที่สำคัญสามประการ:

  1. hrefแอตทริบิวต์ชุด URL ของหน้าเว็บที่คุณต้องการที่จะเชื่อมโยงไปยัง
  2. targetแอตทริบิวต์การตั้งค่าให้_blankซึ่งบอกเบราว์เซอร์ที่จะเปิดการเชื่อมโยงในแท็บใหม่ / หน้าต่างขึ้นอยู่กับการตั้งค่าเบราว์เซอร์
  3. relชุดแอตทริบิวต์noreferrer noopenerการป้องกันการโจมตีที่เป็นอันตรายเป็นไปได้จากหน้าเว็บที่คุณเชื่อมโยงไปยัง

อีกครั้งนี่คือตัวอย่าง HTML ที่ใช้งานได้:

Check out freeCodeCamp.

ซึ่งส่งผลให้เกิดผลลัพธ์ต่อไปนี้ในเบราว์เซอร์:

ตรวจสอบ freeCodeCamp

ขอบคุณอีกครั้งสำหรับการอ่าน มีความสุขในการเขียนโค้ด