リンクに「rel=”noopener”」が付いているソースを見かける様になりました。
このnopenerとは一体何の為につけているのでしょうか。
これから_blankを使用する際には必須になるかもしれません。
目次
「rel=”noopener”」はどこで使うのでしょうか
「rel=”noopener”」はリンクを設置（aタグ）する際に使用します。
ただし、リンク設置の全てに使用するのではなく、新規タブで開く「target=”_blank”」の時に使用します。
HTML
<a href="別タグで開きたいURL" target="_blank" rel="noopener">この様な形で使用。
ポイントは「_blank」の時に使用するという事です。
なぜ「_blank」の時に「rel=”noopener”」が必要なのか
今まで「rel=”noopener”」なるものは使用していませんでした。ではなぜ今になって仕様が追加されたのでしょうか。
それは「セキュリティ」の問題です。
「target=”_blank”」だけでは脆弱性があり、_blankだけで遷移したページをスクリプトを使って「window.opener」にアクセスする事で元タブの情報を書き換えて遷移先を変更できてしまうというのです。
書き換えが行えてしまうと、遷移先を変更する事でフィッシングサイト（詐欺サイト）へ誘導するという事も出来てしまうのです。
そこで「noopener」→「no opener」→「No!opener!（openerはダメ！）」というrelを付ける事が推奨されました。
古いブラウザのバージョンでは使用できない？
まだ「rel=”noopener”」がサポートされていない古いバージョンのブラウザもあります。
そこで「noreferrer」というタグも追加して脆弱性対策を行いましょう。
HTML
<a href="別タグで開きたいURL" target="_blank" rel="noopener noreferrer">
「noreferrer」はリファラ（参照元）を送らない様にする指定の為、noopenerと同じ効果を持ちます。
relの中に「noopener noreferrer」と両方追加する事で古いバージョンへの対策を行いましょう。
まとめ
_blankを使う事によって、最悪フィッシング詐欺にユーザーを巻き込んでしまう事もあるかもしれません。
タグ1つで出来るセキュリティ対策ですので_blankを使う場合は「rel=”noopener noreferrer”」を設置する様にしましょう。
HTMLコーディングのオススメ本
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
できるホームページ HTML＆CSS入門 Windows 10/8.1/7対応
タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!
現場のプロから学ぶ SEO技術バイブル(特典PDF付き)
セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。
