Nếu bạn có liên kết đến một tên miền khác, bạn nên sử dụng rel="noopener", đặc biệt nếu chúng mở trong một tab / cửa sổ mới.
<a href= “http://example.com” target= “_blank” rel= “noopener”> Trang web ví dụ </a>
Không có lệnh này, trang mới có thể truy cập đối tượng cửa sổ của bạn thông qua window.opener. Rất may, mô hình bảo mật nguồn gốc của web ngăn nó đọc trang của bạn, nhưng không may – một số API kế thừa có nghĩa là nó có thể điều hướng trang của bạn đến một URL khác bằng cách sử dụng window.opener.location = newURL.
Ngoài ra, nó còn giúp tăng hiệu suất cho website được đánh giá trong công cụ Lighthouse .
Bản giới thiệu
Các số ngẫu nhiên hoạt động như một nhịp tim cho trang này. Nếu các số ngẫu nhiên không được tạo ra mỗi khung, một cái gì đó đang giữ chuỗi.
Bây giờ hãy nhấp vào một trong số này để mở một trang chạy một số JavaScript đắt tiền:
<a target="_blank"><a target="_blank" rel="noopener">
Không có rel="noopener", các số ngẫu nhiên bị phá vỡ bởi JavaScript của trang mới. Không chỉ vậy, tất cả các hoạt động chủ đề chính đều bị gián đoạn – hãy thử chọn văn bản trên trang. Nhưng với rel="noopener"số lượng ngẫu nhiên tiếp tục tạo ra ở 60fps. Chà, trong Chrome & Opera nào.
Cập nhật: Edge không có kinh nghiệm jank cho một trong hai liên kết vì nó không hỗ trợ window.openercho _blankcác liên kết.
Vậy tại sao điều này xảy ra?
Windows & quy trình
Hầu hết các trình duyệt là đa tiến trình ngoại trừ Firefox (và chúng đang hoạt động trên nó ). Mỗi tiến trình có nhiều luồng, bao gồm cả những gì chúng ta thường gọi là luồng “chính”. Đây là nơi chạy phân tích cú pháp, tính toán kiểu, bố cục, vẽ và JavaScript không công nhân. Điều này có nghĩa là JavaScript chạy trên một tên miền chạy trên một luồng khác với một cửa sổ / tab chạy tên miền khác.
Tuy nhiên, do truy cập cửa sổ chéo đồng bộ mà DOM cung cấp cho chúng tôi thông qua window.opener, các cửa sổ được khởi chạy thông qua target="_blank"kết thúc trong cùng một quy trình & luồng. Điều này cũng đúng với iframe và windows được mở thông qua window.open.
rel="noopener"ngăn chặn window.opener, vì vậy không có quyền truy cập cửa sổ chéo. Trình duyệt Chromium tối ưu hóa cho điều này và mở trang mới trong quy trình riêng của mình.
Cách ly trang web
Ở đây, trong Chrome HQ, chúng tôi đang xem xét việc di chuyển các iframe tên miền và các cửa sổ mới vào quy trình của riêng họ ngay cả khi họ không có rel="noopener". Điều này có nghĩa là quyền truy cập chéo cửa sổ hạn chế sẽ trở nên không đồng bộ, nhưng lợi ích là cải thiện bảo mật và hiệu suất.
Trong khi đó, rel="noopener"mang lại cho bạn lợi ích về hiệu suất và bảo mật ngay hôm nay!
Sự thật thú vị: Lưu ý tôi nói về “tên miền” ở trên chứ không phải “nguồn gốc”. Điều này là do phần nào đáng sợ document.domaincho phép hai miền đồng bộ trở thành một phần của cùng một nguồn gốc.
