Cách sử dụng HTML để mở liên kết trong tab mới

Các tab thật tuyệt phải không? Chúng cho phép người đa nhiệm trong tất cả chúng ta xử lý một loạt các nhiệm vụ trực tuyến cùng một lúc.

Các tab hiện nay rất phổ biến nên khi bạn nhấp vào một liên kết, có thể nó sẽ mở ra trong một tab mới.

Nếu bạn từng tự hỏi làm thế nào để làm điều đó với các liên kết của riêng mình, bạn đã đến đúng nơi.

Phần tử neo

Để tạo liên kết trên một trang web, bạn cần bao bọc một phần tử (văn bản, hình ảnh, v.v.) trong một liên kết (<a> ) và đặt href của nó thuộc tính URL bạn muốn liên kết đến.

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

Xem freeCodeCamp.

Nếu bạn nhấp vào liên kết ở trên, trình duyệt sẽ mở liên kết trong cửa sổ hoặc tab hiện tại. Đây là hành vi mặc định trong mọi trình duyệt.

Để mở một liên kết trong một tab mới, chúng ta sẽ cần xem xét một số thuộc tính khác của các thuộc tính khác của phần tử neo.

Thuộc tính mục tiêu

Thuộc tính này cho trình duyệt biết cách mở liên kết.

Để mở liên kết trong tab mới, chỉ cần đặt target thuộc tính cho _blank :

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

Giờ đây, khi ai đó nhấp vào liên kết, liên kết đó sẽ mở ra trong một tab mới hoặc có thể là một cửa sổ mới tùy thuộc vào cài đặt trình duyệt của người đó.

Mối quan tâm về bảo mật với target="_blank"

Tôi thực sự khuyên bạn nên luôn thêm rel="noreferrer noopener" vào phần tử liên kết bất cứ khi nào bạn sử dụng target thuộc tính:

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

Điều này dẫn đến kết quả sau:

Xem freeCodeCamp.

rel thuộc tính đặt mối quan hệ giữa trang của bạn và URL được liên kết. Đặt nó thành noopener noreferrer là để ngăn chặn một kiểu lừa đảo được gọi là tabnab.

Tabnabbing là gì?

Tabnab, đôi khi được gọi là tabnab ngược, là một khai thác sử dụng hành vi mặc định của trình duyệt với target="_blank" để có được quyền truy cập một phần vào trang của bạn thông qua window.object API.

Với tính năng tab, một trang mà bạn liên kết đến có thể khiến trang của bạn chuyển hướng đến một trang đăng nhập giả mạo. Điều này sẽ khó đối với hầu hết người dùng vì tiêu điểm sẽ nằm trên tab vừa mở - không phải tab ban đầu với trang của bạn.

Sau đó, khi một người quay lại tab có trang của bạn, họ sẽ thấy trang đăng nhập giả mạo thay thế và có thể nhập chi tiết đăng nhập của họ.

Nếu bạn muốn tìm hiểu thêm về cách hoạt động của tabnabling và những tác nhân xấu có thể làm với việc khai thác, hãy xem bài viết của Alex Yumashev và bài viết này của OWASP.

Nếu bạn muốn thấy một két sắt ví dụ làm việc, hãy xem trang này và kho lưu trữ GitHub của nó để biết thêm thông tin về cách khai thác và rel thuộc tính.

Tóm lại

Thật dễ dàng sử dụng HTML để mở một liên kết trong một tab mới. Bạn chỉ cần một liên kết (<a> ) phần tử có ba thuộc tính quan trọng:

1. href thuộc tính được đặt thành URL của trang bạn muốn liên kết tới
2. target thuộc tính được đặt thành _blank , yêu cầu trình duyệt mở liên kết trong tab / cửa sổ mới, tùy thuộc vào cài đặt của trình duyệt
3. rel thuộc tính được đặt thành noreferrer noopener để ngăn chặn các cuộc tấn công độc hại có thể xảy ra từ các trang bạn liên kết đến

Một lần nữa, đây là một ví dụ hoạt động đầy đủ:

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

Kết quả đầu ra sau trong trình duyệt:

Xem freeCodeCamp.

Cảm ơn một lần nữa vì đã đọc. Chúc bạn viết mã vui vẻ.