こんにちは、中村です。
今回はこちらの記事で紹介されている「rel="noopener”」という属性について確認していきたいと思います。
「Firefox 79」が正式リリース ～Windowsで新レンダラー「WebRender」の適用を拡大 - 窓の杜
記事の内容はFirefox79の仕様でrel=“noopener”が記述されていなくてもtarget=“_blank”を利用するとrel=“noopener”が設定された動きになる、というものでした。
rel属性とは？
リンク先のリソースの位置づけを示すものです。
スタイルシートを読み込む時などに使われています。
<link rel="stylesheet" href=“style.css” />
style.cssというファイルはstylesheetですよと明示しています。
ではrel="noopener”はどういう意味なのか。
「openerではないもの」になります。
openerとは？
別のウィンドウから（Window.open を使用して）開かれたウィンドウは、主ウィンドウへの参照を window.opener として保持します。
参照：window.opener - Web API | MDN
target=“_blank”やJavaScriptのWindow.openなどで別ウィンドウ（新しいタブ）で開くことはよくあります。
この時にリンクが設定されていたウィンドウが参照元になります。
この参照元のウィンドウをwindow.openerというオブジェクトとして保持することによって、開いた先のウィンドウのページからアクセスが可能になります。
noopener（openerではない）は、リンク先のウィンドウからアクセスできないようになる記述ということになります。
アクセスできると何が起こる？
リンク先が自分の管理下にあるページや信用のおけるページならそんなに気にすることはないと思いますが、
もともと開いていたページが書き換えられてしまうので、意図しない情報（広告など）が表示されることも可能になります。
セキュリティ上よろしくありません。
セキュリティ問題についてはこちらで詳しく解説されています。
参照：HTML 本当は怖い target="_blank" 。rel="noopener" ってなに？ - かもメモ
2020/8/19現在の対応状況はこちら。IEはダメですがEdgeは対応していました。
まとめ
rel="noopener”をアンカータグに記述しているのは見たことがなかったです。
業務で制作しているサイトではあまり見知らぬページへリンクすることもないので、知らない人も多いんじゃないでしょうか。
ブラウザ側で配慮した結果実装された仕様になりますが、知っておかないといざwindow.openerを使おうと思った時につまづくかもしれない仕様なので覚えておきたいと思います。
