スキルアップを始める!

target=”_blank” のセキュリティリスク?rel “noopener noreferrer”の設定

HTML(エイチティーエムエル)
HTML(エイチティーエムエル)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

“noopener noreferrer”の設定について

target=”_blank”を設定している場合で、 rel=”noopener noreferrer”を設定していない場合、リンク先のサイトがwindow.opener.location = http://external-site.comというJavascriptを設定していると、リンク先のサイトがリンク元のURL を変える事が可能となってしまいます。

タブナビング(Tabnabbing)というフィッシング詐欺等で使われる手法です。

タブナビング(Tabnabbing)

Webブラウザーのタブ表示機能を利用したフィッシングの一種で、ブラウザーのアクティブでないタブの中身をユーザーが気づかないうちにSNSや銀行などの偽ログインページに書き変えてしまうという攻撃手法。

①見た目が普通のサイト https://site.example.jp を準備

②”https://site2.example.com/login” をhttps://site.example.jp/loginと全く同じログイン画面にする

③https://site.example.jpに window.opener.location = “https://site2.example.com/login” を仕込む

④ユーザーが別ウィンドウを開いた時に、元のURLが変わっていてなぜかログイン画面になっている。

⑤ログイン情報を打ち込んでしまう。

⑥最後に元URLにリダイレクトさせる(あたかもログイン成功に見える)

アナログな方法かもしれませんが、もしこの手法を使っているサイトがあった場合、リンク先が開いた時に元タブのURLが変わっている可能性があります。リンク先が別ウィンドウで開いたときは、

「既に開いているタブがいつの間にか別のサイトに変わっているかもしれない」ということをブラウザを扱っている際に少し意識しておくべきかもしれません。

<a href="https://eguweb.jp/" target="_blank" rel="noopener noreferrer">外部サイト</a>

まとめ

WordPress4.7.4~ ではセキュリティ対策として、「target=”_blank”(新しいタブでリンクを開く)」が指定されている場合は、「rel=”noopener noreferrer”」属性が自動的に付加されるようになったようです。

URLをコピーしました!