WordPressで外部リンクを作成すると設定されるrel =”noopener”。
脆弱性対応のための記述なので消さないようにしましょう。
rel=”noopener”って何？
WordPressでaタグを使ってリンクを作ると
<a href="https://yahoo.co.jp" rel="noopener" target="_blank">Yahoo</a>
のようにrel=”noopener”が自動で付与されることがあります。
このnoopenerってなんなのか、最近まで知りませんでした。
私はaタグはWordPressのエディターにあるボタンを使わず自分で直接書くので、自動で付与されることはなく意識していませんでした。
このrel=”noopener”って何なのか気になったので調べてみました。
rel=”noopener”はセキュリティー対策
rel=”noopener”はWordPress4.7.4以降のバージョンでリンクに「target=”_blank”」を指定すると自動で付与されます。
「target=”_blank”」は「指定のリンクを新しい画面（タブ）で開いてね」という指定です。
実はこの時に何も設定しないと次のリンク先で「元の画面を新しいURLへ転送してね」といったプログラミングが可能になります。
（これは「Tabnabbing」と呼ばれる脆弱性で詳しくはリンクのへの rel=noopener 付与による Tabnabbing 対策をご覧ください。）
具体的には遷移先の画面で「window.opener.location =”悪意のあるサイトのURL”」などと書いてあると、閲覧者の意図に関係なく、そのURLを表示してしまいます。
記事でリンクするリンク先は信頼するサイトのはずですが、そのサイトが万が一ハッキングなどの乗っ取りをされて、上記のようなコードを埋め込まれたりすると、自分の記事から閲覧者を意図しない悪意のあるサイトへ導いたりする可能性があるわけです。
怖いですね。
これを防ぐために「rel=”noopener”」が必要なのです。
rel=”noopener”を付加したリンクの作り方
rel=”noopener”を付加したリンクの作り方は簡単で、投稿画面の
から「link」を選んで
で「リンクを新しいタブで開く」にチェックを付けます。
これで作成されたリンクにはrel=”noopener”が付与されています。
（「リンクを新しいタブで開く」にチェックを付けないとrel=”noopener”は出力されません。）
まとめ
rel=”noopener”は脆弱性を取り除くためにセキュリティ上必要なので、消さないようにしましょう。
以上、WordPressのテキストエディターでrel =”noopener”を挿入する方法でした。
