target=”_blank”を使用する際の注意点

target=”_blank”やwindow.open()など、リンクを別タブで開く際の注意事項をメモ。

問題点

target=”_blank”やwindow.open()などでリンクを別タブで開いた場合、開いた先のページからリンク元のページを操作できてしまうようです。
リンク先ページでwindow.opener()を使うことで、リンク元ページを別ページに遷移させることができます。

実際にtarget=”_blank”とwindow.open()で動作を確認して、対応方法を試してみます。
　

target=”_blank”の場合

まずはリンク元のページです。

index.html

<p>元ページ</p>
<p><a href="new.html" target="_blank">target="_blank"でリンク</a></p>

次に別タブで開くリンク先のページです。

new.html

<p>別タブで開いたページ</p>

リンク先のページで以下のJavaScriptが実行されるようにしておきます。

window.opener.location = 'after.html';

最後にリンク元ページからリンクをクリックした後に表示されるページです。

after.html

<p>元ページを別ページに遷移しました</p>

リンク元ページから別タブでページ遷移すると、リンク元ページが遷移していることを確認できました。
target=”_blank”の場合のデモページ

次に対応方法ですが、target=”_blank”を設定しているリンクにrel=”noopener”を追加します。

index.html

<p>元ページ</p>
<p><a href="new.html" target="_blank" rel="noopener">target="_blank"でリンク</a></p>

target=”_blank”の場合のデモページ2
ただし、IEやedgeでは対応していないようです。

IEやedgeも対応する場合、noreferrerも合わせて設定するといいようです。

index.html

<p>元ページ</p>
<p><a href="new.html" target="_blank" rel="noopener noreferrer">target="_blank"でリンク</a></p>

これでIEやedgeでも対応することができました。
target=”_blank”の場合のデモページ3
　

window.open()の場合

先ほどはaタグにtarget=”_blank”が付いている場合を試しましたが、今度はJavaScriptのwindow.open()で別タブを開く場合を試してみます。

index.html

<p>元ページ</p>
<p><a href="https://cly7796.net/blog/sample/notes-on-target-blank/03/new.html">window.open()でリンク</a></p>

JavaScriptでリンクを別タブで開くように設定します。

$(function() {
  $('a[href ^= "http"]').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    window.open(url, '_blank');
  });
});

残りのページは前のサンプルと同じなので省略します。
これで試してみたところ、target=”_blank”の時と同様にリンク元ページが遷移してしまうようでした。
window.open()の場合のデモページ

対応として、window.open()の第三引数にnoopenerを設定してみます。

index.html

$(function() {
  $('a[href ^= "http"]').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    window.open(url, '_blank', 'noopener');
  });
});

window.open()の場合のデモページ2
これでchromeやFirefoxは問題なかったのですが、IEとedgeは、リンク元ページが遷移してしまうままでした。
また、IEとedge、Safariは別タブではなく別ウインドウでリンクを開いてしまうようでした。

調べてみたところ、以下の方法だとIEとedge、Safariでも対応できるようでした。

index.html

$(function() {
  $('a[href ^= "http"]').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var winopen = window.open();
    winopen.opener = null;
    winopen.location = url;
  });
});

window.open()の場合のデモページ3
　

【参考サイト】

• リンクを作る時の target=”_blank” の危険性 – 隙あらば寝る
• HTML 本当は怖い target=”_blank” 。rel=”noopener” ってなに？ – かもメモ
• javascript – Use window.open but block use of window.opener – Stack Overflow
• window.open – Web API | MDN