QuyDX

08/03/2023

Tại sao nên thêm rel="noopener" khi sử dụng target="_blank"?

Như chúng ta đã biết, sử dụng target="_blank" cho thẻ a thì khi người dùng click vào liên kết trình duyệt sẽ mở trên một tab mới, thường là do liên kết trong thẻ a dẫn tới một website khác và chúng ta không muốn người dùng rời khỏi website của mình.

Vấn đề là gì?

Với cách làm trên có 2 vấn đề về bảo mật và hiệu suất:

1. Tại trang đích có thể sử dụng window.opener để kiểm soát được cửa sổ trang gốc của chúng ta, ví dụ chạy window.opener.location.href = 'https://unitym.tech/' là có thể chuyển hướng cửa sổ gốc tới https://unitym.tech/. Hãy tưởng tượng bạn bị chuyển tới một URL có nội dung "độc hại" như 18+ (khi ngồi cạnh người yêu), hay các trang giả mạo để đánh cắp tài khoản ngân hàng, thông tin cá nhân, v.v...
2. Trang đích chạy cùng tiến trình xử lý Javascript với trang gốc, nếu trang đích sử dụng nhiều logic "nặng" hoặc tối ưu chưa tốt về mặt hiệu năng có thể làm ảnh hưởng tới trang web của bạn đang được mở tại cửa sổ gốc.

Khắc phục thế nào?

Để khắc phục vấn đề trên, bạn hãy thêm rel="noopener" vào toàn bộ các thẻ a có target="_blank" nhé. Ví dụ:

<a href="https://unitym.tech/" target="_blank" rel="noopener">UniTech Blog</a>

Bạn cũng có thể sử dụng rel="noreferrer" thay cho rel="noopener" tuy nhiên không được khuyến nghị vì noreferrer sẽ làm cho trang đích không thể biết người dùng tới từ nguồn nào, điều này có thể ảnh hưởng tới kết quả phân tích, thống kê truy cập của trang đích.

Tham khảo: https://web.dev/external-anchors-use-rel-noopener/