target="_blank" で開くリンクには rel="noopener" をつける

  • 487
    Like
  • 2
    Comment
More than 1 year has passed since last update.

The performance benefits of rel=noopener - JakeArchibald.com より

target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。

管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない(参考:http://qiita.com/wakaba@github/items/707d72f97f2862cd8000

target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場合に取得できるのは異なるオリジンへスクリプトからアクセスできる API
に載っているプロパティしかなく、大きな問題はない(古いブラウザなどは知らないけど)。

けれども、window.opener.location = newURLでopenerを他のURLに移動させることはできるので、やはり必要なければnoopenerをつけておく方がいい(window.locationがsame originでなくても書き込み可能なのはなぜだろう)。

The performance benefits of rel=noopener - JakeArchibald.comによると、さらにnoopenerをつけることでパフォーマンスにも良い影響があるとのこと。

However, due to the synchronous cross-window access the DOM gives us via window.opener, windows launched via target="_blank" end up in the same process & thread. The same is true for iframes and windows opened via window.open.

rel="noopener" prevents window.opener, so there's no cross-window access. Chromium browsers optimise for this and open the new page in its own process.

window.openerを使えるように同じprocess & threadを使うから、target="_blank"で開いたウィンドウで何か重い処理をされると、親のウィンドウの処理も一緒に遅延すると。

上記URLではデモも用意されているので、とても参考になる。おすすめです。