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

Tab rấ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ó khả năng nó sẽ mở 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 phải bọc một phần tử (văn bản, hình ảnh, v.v.) trong phần tử anchor ( ) và đặt hrefthuộc tính của nó thành URL mà bạn muốn liên kết.

Check out freeCodeCamp.

Kiểm tra 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 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 targetthuộc tính thành _blank:

Check out freeCodeCamp.

Bây giờ 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ử neo bất cứ khi nào bạn sử dụng targetthuộc tính:

Check out freeCodeCamp.

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

Kiểm tra freeCodeCamp.

Các relthuộc tính thiết lập mối quan hệ giữa trang của bạn và URL liên kết. Đặt nó thành noopener noreferrerlà để ngăn chặn một loại lừa đảo được gọi là tabnab.

Tabnabbing là gì?

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

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 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, thay vào đó họ sẽ thấy trang đăng nhập giả mạo 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 tabnacking 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 xem một chiếc két sắtví dụ làm việc, hãy xem trang này và repo GitHub của nó để biết thêm thông tin về khai thác và relthuộc tính.

Tóm tắt

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 phần tử anchor ( ) với ba thuộc tính quan trọng:

  1. Các hrefthiết lập thuộc tính cho các URL của trang bạn muốn liên kết đến
  2. Các targetthuộc tính thiết lập để _blank, mà cho trình duyệt để mở liên kết trong tab / cửa sổ mới, tùy thuộc vào thiết lập của trình duyệt
  3. Các relthiết lập thuộc tính để noreferrer noopenerngăn chặn các cuộc tấn công độc hại có thể từ các trang bạn liên kết đến

Một lần nữa, đây là HTML mẫu hoạt động:

Check out freeCodeCamp.

Kết quả nào dẫn đến kết quả sau trong trình duyệt:

Kiểm tra freeCodeCamp.

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