HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。
href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。
target="_blank" のセキュリティリスク
リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。
なお、リンク先では脆弱性(vulnerability)となっていますが、脆弱性の定義や見方によっては微妙なところです。個人的にはリンク元Webサイトの機密性/完全性/可用性を損なわないため、HTML/JavaScript/DOMの仕様上のセキュリティリスクであると認識しています。
解説とデモ
target="_blank"で開かれたリンク先のページからリンク元のURLを取得するには、window.opener.locationプロパティの値を取得します。このプロパティの値はreadonlyではないため、リンク先のJavaScriptコードから書き換える事ができます。
window.opener.location = 'https://reisato.plala.jp/rsato/weblog/files/20160719-fakepage.html';
デモとしてFacebookとGoogle+の投稿を開いていたタブを書き換えてみます。投稿内のリンクをクリックしてみてください（ログイン不要です）。
[追記]デモの動画も撮ってみました。VirtualBoxの録画機能は手軽で便利ですね。
セキュリティリスク
リンクをクリックしたユーザとしては、「リンク先を見た後に元のタブに戻ったら、なぜかページが変わっていた」という状況になります。一旦リンク元のページへの注目が外れるため、偽のログインページを表示する事でフィッシングに悪用される可能性があります。なお、FacebookおよびGoogle+へはそれぞれのフィードバックからこの事象を報告しています。
対策
対策としては、外部リンクのa要素にrel属性を追加します。属性の値はnoopener noreferrerの2つを列挙します(後者は前者をサポートしないFirefoxサポートの為です)。特に、SNSなどの不特定多数のユーザーが任意のURLへリンクできるWebサイトでは設定するべきです。FacebookとGoogle+はこの対策が行われていないため、このデモが機能します。なお、Twitterは外部リンクがt.coドメインを経由するため機能しませんでした。
<a href="http://outer.site/" rel="noopener noreferrer">outer link</a>
先ほどのデモページのリンク先にデモページ自身をtarget="blank"で開く各種リンクを用意していますのでお試しください。
コメントする