624
550

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-05

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ではデモも用意されているので、とても参考になる。おすすめです。

624
550
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
624
550

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?