target="_blank”をaタグに使用するときの注意点

はじめに

遷移先のリンクを別タブで開くためにはtarget="_blank”を指定する必要がある。
このtarget="_blank”について調べると、「セキュリティ上の問題があるから、rel="noopener"をつけたほうがいい」という指摘が出てくる。

結論としては、現在主要なブラウザで使用することを想定した場合、必ずしも明示的にrel="noopener"　を書く必要はない。なぜなら、ブラウザ側でtarget="_blank”が指定されている場合、rel="noopener"を暗黙的にデフォルトで入れてくれる場合が多いからである。

rel="noopener"の指定方法

<a href="https://〜" target="_blank" rel="noopener">サンプルのリンク</a>

rel="noopener"を指定しなかった場合に起こっていたこと

遷移先のWebページから、window.opener.locationにWebサイトのURLを指定すると、遷移元のWebページを別ページにリダイレクトことができる。
遷移元は安全という認識が人々にある。この操作ができてしまうと、元のページだと思っているリダイレクト先のページで不要なログインやダウンロードなどをしてしまう可能性があり、フィッシング詐欺やウイルスをPCに入れてしまう可能性が高まる。そのため、セキュリティ上大変危険である。

現在はデフォルトで安全にtarget="_blank”の使用ができる

FirefoxやChrome、Safariではrel="noopener"を明示的にコードに書かなくても、デフォルトで設定される対応が済んでいる。
私が確認したところ、Opera, Microsoft Edgeでも上記の対応がされているような動作をしたため、rel="noopener"を指定しなかった場合に起こっていたことに書いた現象が再現できなかった。

FireFox

Chrome

To conform to a change in the HTML standard, anchor tags with target="_blank" will now imply rel="noopener" by default, this helps prevent tab-napping attacks.

rel="noopener"を指定しなかった場合に起こっていたことの再現方法

この再現方法は、rel="opener"をaタグに指定することである。
現在は、target="_blank”のプロパティが指定された場合、rel="noopener"が自動で暗黙的に追加される。rel="noopener"が追加されると、window.openerをnullで遷移先のWebページに渡すことになる。そのためrel="noopener"とは反対の効果のある、rel="opener"をaタグに渡してあげることで、このセキュリティの問題を再現することができる。

警告
セキュリティ上で危険とされているため、実装においてtarget="_blank”のプロパティを指定した場合、rel="opener"をaタグに指定しないこと

参考文献

おわりに

target="_blank”をaタグに使用するときの注意点について調べた。
rel="noopener"を指定しなくても大丈夫な場合が増えている。このように、見つかった技術上の欠陥をブラウザなどの実行環境で補ってくれると、開発者として安心して開発することができると思った。
ブラウザの開発が全ての欠陥をすぐに防いでくれるわけではないので、開発者としてセキュリティ対策に努めていく。