ESLint và target="_blank"

Trong quá trình viết trang web, khi chúng ta muốn mở một cửa sổ mới, thường chúng ta sẽ sử dụng cách viết như thế này: <a target="_blank">. Tuy nhiên, nếu bạn sử dụng ESLint, nó sẽ khuyên bạn nên thêm rel="noreferrer noopener" vào thẻ <a>, như sau:

    
<a href="https://www.google.com" target="_blank" rel="noreferrer noopener">
  Google
</a>
    
  

Lý do cần thêm dòng này là vì khi trình duyệt sử dụng target="_blank để mở một cửa sổ mới, trang web trong cửa sổ mới có thể thông qua đối tượng window.opener để thao tác trang ban đầu của bạn. Ví dụ, khi bạn từ trang A nhấn vào liên kết để mở cửa sổ mới đến trang B, trang B có thể thực thi mã sau trên trang của nó:

    
window.opener.location = 'https://www.google.com';
    
  

Lúc này, bạn sẽ thấy trang web của bạn trên trang A âm thầm chuyển hướng đến trang Google. Cách làm này chủ yếu lợi dụng việc người dùng chỉ chú ý đến cửa sổ mới mở (trang B) mà bỏ qua cửa sổ ban đầu (trang A). Nếu không xử lý thêm, cửa sổ mới mở có thể thay đổi URL mà trang ban đầu đang duyệt. Do đó, nếu bạn sử dụng target="_blank", eslint-plugin-react sẽ khuyên bạn nên thêm rel="noreferrer noopener để đảm bảo trang hiện tại mà người dùng đang duyệt sẽ không bị ảnh hưởng bởi trang web mới mở.