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

แท็บดีมากใช่ไหม? มันช่วยให้คนทำหลายอย่างพร้อมกันในเราทุกคนสามารถทำหลายงานออนไลน์พร้อมกันได้

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

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

องค์ประกอบ Anchor (Anchor Element)

เพื่อสร้างลิงก์บนหน้าเว็บ คุณต้องห่อองค์ประกอบ (ข้อความ รูปภาพ ฯลฯ) ด้วยองค์ประกอบ anchor (<a>) และตั้งค่าแอตทริบิวต์ href เป็น URL ที่คุณต้องการลิงก์ไป

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Check out freeCodeCamp.

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

เพื่อเปิดลิงก์ในแท็บใหม่ เราต้องดูแอตทริบิวต์อื่นๆ ขององค์ประกอบ anchor

แอตทริบิวต์ Target (Target Attribute)

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

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

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

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

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

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

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

สิ่งนี้ทำให้ได้ผลลัพธ์ดังนี้:

Check out freeCodeCamp.

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

Tabnabbing คืออะไร?

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

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

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

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

หากคุณต้องการดูตัวอย่างที่ ปลอดภัย ที่ทำงาน โปรดดูหน้านี้และ GitHub repo ของมันสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการโจมตีและแอตทริบิวต์ rel

สรุป

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

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

อีกครั้ง นี่คือตัวอย่างที่ทำงานสมบูรณ์:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

ซึ่งให้ผลลัพธ์ดังนี้ในเบราว์เซอร์:

Check out freeCodeCamp.

ขอบคุณอีกครั้งที่อ่าน Happy coding.