眠気まなこをこすりながらAM3:00にこの記事を書いています。これが社畜という奴か・・・（僕は生粋のフリーランスです）
さて、今日のお話はWordpress開発をしているときにふと気づいた「rel=”noopener,nofollow”」という記述についてのお話。
WordPressの構築をしているときに気づいた訳分からない記述
前回の記事でも少し触れましたが、僕は独学でWordpressからWEB制作を覚えたので、最初の頃は基礎もお作法もありませんでした。
そんなときにChromeの検証ツールを知って、面白くて自分の作成したページを色々と検証してみているときに気づいたのが見覚えのない「rel=”noopener,nofollow”」という記述。
当時はブロックエディタではなくクラシックエディタだったと思います。
知識が乏しいながらも色々調べてみて理解したのは「とりあえずセキュリティ的に危ないから、target=”_blank”をつけるときは黙ってrel=”noopener”も付けとけよ」ってことでした。
それからはWordpress以外の案件（静的サイトの構築など）でも、rel=”noopener”を使うようにしています。
まだ僕は出会っていない・・・
気になっているのが、色々と案件をこなしている中でまだ「rel=”noopener”」を使っているコードを見たことがないっていうことです。
一応10年以上WEB制作はしていますが、ほとんどが新規制作でリニューアルやプロジェクトの中に入る経験がないということもあると思います。
正直小規模な案件の場合、外部リンクの数もそこまで大きくなかったり、信頼できるリンク先（自社サイトがほとんど）なので気にしていない制作者さんも多いのかもしれません。
ただ、僕は今後もこのrel=”noopener”を記述していくつもりだし、色々と知識をつけた今だからこそこの記述の重要性を伝えたい！
ちゃんと記述しないとセキュリティ的に結構やばいかもよ？
target=”_blank”を使ったときにrel=”noopener”をしていないと、具体的にどんなリスクがあるのか。
簡単に言えばリンク先のページから、リンク元のページを操作することができるということです。
もちろん操作できる内容は制限があるのかもしれませんが、単純にページ遷移をさせるだけでもフィッシングサイトやウイルスの入ったサイトに流すことができるようになります。
リンク先が信頼できるサイトであれば問題ない。
確かにそうかもしれませんが、そのリンク先のサイトがいつ危険に晒されるのかはわかりません。もしかしたら今は猫をかぶっているだけの可能性もあります。
アナリティクスなどの解析ツールを使えば、自サイトへのバックリンク（被リンク）をしているサイトを見つけるのは簡単で、そのサイトの見た目だけをコピーすることも簡単にできます。
つまり、今あなたが貼っているリンク先の人がもし悪意を持ったとしたら、あなたのサイトの見た目をまるパクりしたフィッシングサイトなどを作って、自分のサイトにリンクした瞬間にユーザーをそこに飛ばすことができるということです。
なぜこんなことが起きるのか
通常、ChromeなどのWebブラウザはタブごとにスレッドが分かれているので、今開いているタブと別のタブはお互いに干渉することがありません。
が、target=”_blank”を指定した場合、元々は同じタブのものという認識なのかそれぞれのタブ同士がお互いに干渉することができるようになります。
そのため、リンク先に悪意のあるコードが書かれていると、リンク元を操作できるということです。
セキュリティ以外にパフォーマンスにも影響があるかも
target=”_blank”を使ったとき、同じスレッドが使われるということは、単純に一つのスレッドで2ページを解析している状態になります。
もしリンク先のページが激重サイトだとしたら、リンク元サイトのパフォーマンスにも影響を及ぼすことになります。
もちろん複数リンク先が用意されているページだったらなおのこと。
まとめサイトやアンテナサイトの制作が一時期すごく流行った気がしますが、その辺りのセキュリティやパフォーマンスは果たして大丈夫だったのか・・・。
まとめ
WEB制作のセキュリティと聞くとバックエンドの分野というイメージが強いと思いますが、実際はフロント側で対応できるセキュリティも多くあります。
今回のrel=”noopener”についてはフロントよりも前のコーディングの段階の話で、難しい記述なども必要なく簡単に設定できる項目なので、癖づけるようにしてくださいね。
ただし、同サイト内で別タブで開いてお互いに干渉が必要になるような機能の場合は注意が必要です。