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 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 với trang của bạn. Nếu trang khác đang chạy nhiều JavaScript, hiệu suất của trang có thể bị ảnh hưởng.
  • Trang khác có thể truy cập vào đối tượng window của bạn bằng thuộc tính window.opener. Hành động 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.

Việc thêm rel="noopener" hoặc rel="noreferrer" vào đường liên kết target="_blank" sẽ giúp tránh được các vấn đề này.

Cách Lighthouse không kiểm tra được đích đến nhiều nguồn gốc

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

Kiểm tra bằng Lighthouse cho thấy các đườ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 để 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 chứa thuộc tính rel="noopener" hoặc rel="noreferrer".
  2. Lọc ra mọi đường liên kết cùng máy chủ lưu trữ.

Vì Lighthouse lọc ra các đường liên kết cùng máy chủ, nên có một trường hợp đặc biệt mà bạn cầ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 của bạn mà không sử dụng rel="noopener", thì hệ quả về 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 các đường liên kết này trong kết quả Lighthouse.

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

Thêm rel="noopener" hoặc rel="noreferrer" vào mỗi đường liên kết được xác định trong báo cáo Lighthouse. Nhìn chung, khi bạn sử dụng target="_blank", hãy 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" ngăn không cho trang mới truy cập vào thuộc tính window.opener và đảm bảo trang này chạy trong một quy trình riêng.
  • rel="noreferrer" có tác dụng tương tự nhưng cũng ngăn tiêu đề Referer được gửi đến trang mới. Xem Loại đường liên kết "BÁO CÁO".

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

Tài nguyên