Reactでaタグの中にtarget='_blank'を書いたらESLintに怒られた話

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component {
  render() {
    return (
      <a
        href="http://example.com"
        target="_blank"
      >
        アンカーリンク
      </a>
    );
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
);

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener/

rel="noopener noreferrer"つけないでtarget="_blank" 使うとセキュリティーリスクあるからやめろ！
(https://mathiasbynens.github.io/rel-noopener/)を参照しなさいっ！

its window.opener property will be null.

window.opener プロパティnullにするよ

It indicates that no referrer information is to be leaked when following the link.

リンクをたどるときにリファラー情報漏らさないよ

<a href="..." rel="noreferrer" target="_blank"> has the same behavior as <a href="..." rel="noreferrer noopener" target="_blank">.

noreferrerとnoreferrer noopenerは同じ

import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component {
  render() {
    return (
      <a
        href="http://example.com"
        target="_blank"
+       rel="noreferrer noopener"
      >
        アンカーリンク
      </a>
    );
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
);