แท็บนั้นยอดเยี่ยมใช่ไหม ซึ่งช่วยให้เราทุกคนทำงานหลายอย่างพร้อมกันได้ในเวลาเดียวกัน
ขณะนี้แท็บต่างๆ กลายเป็นเรื่องปกติไปแล้ว เมื่อคุณคลิกที่ลิงก์ มีแนวโน้มว่าแท็บนั้นจะเปิดขึ้นในแท็บใหม่
หากคุณเคยสงสัยว่าจะทำอย่างไรกับลิงก์ของคุณเอง คุณมาถูกที่แล้ว
องค์ประกอบจุดยึด
ในการสร้างลิงก์บนหน้าเว็บ คุณต้องใส่องค์ประกอบ (ข้อความ รูปภาพ และอื่นๆ) ไว้ในจุดยึด (<a> ) และตั้งค่า href แอตทริบิวต์ไปยัง URL ที่คุณต้องการเชื่อมโยงไป
<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>ลองดู freeCodeCamp
หากคุณคลิกลิงก์ด้านบน เบราว์เซอร์จะเปิดลิงก์ในหน้าต่างหรือแท็บปัจจุบัน นี่เป็นพฤติกรรมเริ่มต้นในทุกเบราว์เซอร์
ในการเปิดลิงก์ในแท็บใหม่ เราจะต้องดูแอตทริบิวต์อื่นๆ ของแอตทริบิวต์อื่นๆ ขององค์ประกอบจุดยึด
แอตทริบิวต์เป้าหมาย
คุณลักษณะนี้บอกเบราว์เซอร์ถึงวิธีการเปิดลิงก์
หากต้องการเปิดลิงก์ในแท็บใหม่ ให้ตั้งค่า target แอตทริบิวต์ _blank :
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>ตอนนี้เมื่อมีคนคลิกที่ลิงก์ ลิงก์นั้นจะเปิดขึ้นในแท็บใหม่ หรืออาจเป็นหน้าต่างใหม่ ทั้งนี้ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ของบุคคลนั้น
ข้อกังวลด้านความปลอดภัยกับ target="_blank"
ฉันขอแนะนำอย่างยิ่งให้คุณเพิ่ม rel="noreferrer noopener" . เสมอ ไปยังองค์ประกอบจุดยึดทุกครั้งที่คุณใช้ target แอตทริบิวต์:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>ซึ่งส่งผลให้ผลลัพธ์ต่อไปนี้:
ลองดู freeCodeCamp
rel แอตทริบิวต์กำหนดความสัมพันธ์ระหว่างหน้าของคุณและ URL ที่เชื่อมโยง ตั้งค่าเป็น noopener noreferrer คือการป้องกันฟิชชิ่งประเภทหนึ่งที่เรียกว่า tabnabbing
การทับถมคืออะไร
Tabnabbing บางครั้งเรียกว่า reverse tabnabbing เป็นช่องโหว่ที่ใช้พฤติกรรมเริ่มต้นของเบราว์เซอร์กับ target="_blank" เพื่อเข้าถึงหน้าของคุณบางส่วนผ่าน window.object API.
เมื่อใช้ tabnabbing หน้าที่คุณลิงก์ไปอาจทำให้หน้าของคุณเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบปลอม ผู้ใช้ส่วนใหญ่จะสังเกตเห็นได้ยาก เนื่องจากโฟกัสจะอยู่ที่แท็บที่เพิ่งเปิดขึ้น ไม่ใช่แท็บเดิมที่มีเพจของคุณ
จากนั้นเมื่อมีคนสลับกลับไปที่แท็บที่มีหน้าของคุณ พวกเขาจะเห็นหน้าเข้าสู่ระบบปลอมแทนและอาจป้อนรายละเอียดการเข้าสู่ระบบของตน
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของการแท็บและสิ่งที่นักแสดงที่ไม่ดีสามารถทำอะไรกับการหาประโยชน์ได้ ให้อ่านบทความของ Alex Yumashev และบทความนี้โดย OWASP
หากคุณต้องการดูตู้เซฟ ตัวอย่างการทำงาน โปรดดูหน้านี้และ GitHub repo สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ประโยชน์และ rel แอตทริบิวต์
โดยสรุป
ง่ายต่อการใช้ HTML เพื่อเปิดลิงก์ในแท็บใหม่ คุณแค่ต้องการสมอ (<a> ) องค์ประกอบที่มีคุณสมบัติที่สำคัญสามประการ:
- The
hrefแอตทริบิวต์ตั้งค่าเป็น URL ของหน้าที่คุณต้องการเชื่อมโยงไป - The
targetตั้งค่าแอตทริบิวต์เป็น_blankซึ่งบอกให้เบราว์เซอร์เปิดลิงก์ในแท็บ/หน้าต่างใหม่ ขึ้นอยู่กับการตั้งค่าของเบราว์เซอร์ - The
relแอตทริบิวต์ตั้งค่าเป็นnoreferrer noopenerเพื่อป้องกันการโจมตีที่เป็นอันตรายที่อาจเกิดขึ้นจากหน้าเว็บที่คุณเชื่อมโยงไปยัง
อีกครั้ง นี่คือตัวอย่างการทำงานเต็มรูปแบบ:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>ซึ่งส่งผลให้ผลลัพธ์ต่อไปนี้ในเบราว์เซอร์:
ลองดู freeCodeCamp
ขอขอบคุณอีกครั้งสำหรับการอ่าน ขอให้สนุกกับการเขียนโค้ด
