Mở Link Trong Tab Mới Bằng HTML: Hướng Dẫn Bước Đi Bước

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

Tab phổ biến đến mức khi bạn nhấp vào link, rất có thể nó sẽ mở trong tab mới.

Nếu bạn từng thắc mắc cách làm điều đó với link của riêng mình, bạn đã đến đúng nơi.

Phần Tử Anchor (Neo)

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

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

Xem freeCodeCamp.

Nếu bạn nhấp vào link trên, trình duyệt sẽ mở link 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ở link trong tab mới, chúng ta cần xem một số thuộc tính khác của phần tử anchor.

Thuộc Tính Target

Thuộc tính này nói với trình duyệt cách mở link.

Để mở link trong tab mới, chỉ cần đặt thuộc tính target thành _blank:

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

Bây giờ khi ai đó nhấp vào link, nó sẽ mở trong tab mới, hoặc có thể cửa sổ mới tùy theo cài đặt trình duyệt của người dùng.

Vấn Đề Bảo Mật Với target="_blank"

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

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

Điều này cho kết quả sau:

Xem freeCodeCamp.

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

Tabnabbing Là Gì?

Tabnabbing, đôi khi gọi là reverse tabnabbing, 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ó quyền truy cập một phần vào trang của bạn qua API window.object.

Với tabnabbing, trang 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ả. Điều này sẽ khó để hầu hết người dùng nhận ra vì焦点 sẽ nằm trên tab vừa mở – không phải tab gốc với trang của bạn.

Khi người dùng chuyển lại tab với trang của bạn, họ sẽ thấy trang đăng nhập giả thay thế và có thể nhập thông tin đăng nhập.

Nếu bạn quan tâm đến cách tabnabbing hoạt động và những gì kẻ xấu có thể làm với khai thác này, hãy xem bài viết của Alex Yumashev và bài của OWASP.

Nếu bạn muốn xem ví dụ an toàn hoạt động, hãy xem trang này và repo GitHub của nó để biết thêm về khai thác và thuộc tính rel.

Tóm Tắt

Dễ dàng dùng HTML để mở link trong tab mới. Bạn chỉ cần phần tử anchor (<a>) với ba thuộc tính quan trọng:

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

Lại đây là ví dụ hoàn chỉnh hoạt động:

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

Cho kết quả sau trong trình duyệt:

Xem freeCodeCamp.

Cảm ơn đã đọc. Chúc bạn lập trình vui vẻ.