Các đường liên kết đến các đích đến nhiều nguồn gốc là không an toàn

Khi bạn liên kết đến một trang trên trang web khác bằng thuộc tính target="_blank", bạn có thể khiến trang web của mình gặp phải các vấn đề về hiệu suất và bảo mật:

  • Trang khác có thể chạy trên cùng một quy trình như trang của bạn. Nếu trang khác đang chạy nhiều JavaScript, hiệu suất trang của bạn có thể bị ảnh hưởng.
  • Trang kia có thể truy cập vào đối tượng window của bạn bằng thuộc tính window.opener. Điều này có thể cho phép trang khác chuyển hướng trang của bạn đến một URL độc hại.

Đang thêm rel="noopener" hoặc rel="noreferrer" vào liên kết target="_blank" của bạn sẽ giúp tránh được các vấn đề này.

Cách quá trình kiểm tra đích đến trên nhiều nguồn gốc của Lighthouse không thành công

Lighthouse gắn cờ các đường liên kết không an toàn đến các đích đến nhiều nguồn gốc:

Kiểm tra Lighthouse cho thấy đường liên kết không an toàn đến các đích đến nhiều nguồn gốc

Lighthouse sử dụng quy trình sau đây để xác định các đường liên kết là không an toàn:

  1. Thu thập tất cả thẻ <a> chứa thuộc tính target="_blank" nhưng không phải thuộc tính rel="noopener" hoặc rel="noreferrer".
  2. Lọc ra mọi đường liên kết cùng lưu trữ.

Vì Lighthouse lọc ra các đường liên kết cùng lưu trữ, có một trường hợp hiếm gặp mà bạn nên lưu ý nếu đang làm việc trên một trang web lớn: nếu một trang chứa đường liên kết target="_blank" đến một trang khác trên trang web mà không sử dụng rel="noopener", ngụ ý hiệu suất của quá trình kiểm tra này vẫn áp dụng. Tuy nhiên, bạn sẽ không thấy những đường liên kết này trong kết quả tìm kiếm trên Lighthouse.

Cách cải thiện hiệu suất của trang web và ngăn chặn các lỗ hổng bảo mật

Thêm rel="noopener" hoặc rel="noreferrer" cho từng đường liên kết được xác định trong báo cáo Lighthouse. Nói chung, khi bạn sử dụng target="_blank", luôn luôn thêm rel="noopener" hoặc rel="noreferrer":

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" khiến trang mới không thể để truy cập vào thuộc tính window.opener và đảm bảo mã này chạy trong một quy trình riêng biệt.
  • rel="noreferrer" có tác dụng tương tự nhưng cũng ngăn chặn tiêu đề Referer bị gửi tới trang mới. Xem phần Loại liên kết "noreferrer".

Xem bài viết Chia sẻ an toàn tài nguyên trên nhiều nguồn gốc để biết thêm thông tin.

Tài nguyên