こんにちは、Ryohei(@ityryohei)です!

本記事では、JavaScriptでaタグがtarget="_blank"であればrel="noopener"を自動で付与する方法をご紹介しています。

target="_blank"のときにrel="noopener"を自動で付与したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

aタグがtarget="_blank"であればrel="noopener"を自動で付与する

aタグtarget属性に_blankが指定されている場合にrel属性のnoopenerを自動付与してみます。

下記サンプルでは、奇数番目の aタグ に予めtarget="_blank"を指定しておき、JavaScriptでnoopenerを付与しています。noopenerだけではなく noreferrerなど他の値を同時に付与したい場合はコメントアウトしている行を参考に修正ください。

HTML

<ul>
    <li><a href="https://www.google.com/" target="_blank">https://www.google.com/</a></li>
    <li><a href="https://www.yahoo.co.jp/">https://www.yahoo.co.jp/</a></li>
    <li><a href="https://www.bing.com/" target="_blank">https://www.bing.com/</a></li>
</ul>

JavaScript

//ドキュメント内のa要素を取得
const elements = document.getElementsByTagName('a');

for(let element of elements){
    //a要素のhref(リンク)を取得
    let target = element.getAttribute('target');
    
    //target属性が_blankであれば
    if(target === '_blank'){
        //rel属性のnoopenerを付与
        element.setAttribute('rel', 'noopener');

        //noreferrerも付与する場合はこちら
        //element.setAttribute('rel', 'noopener noreferrer');
    }
}

実行結果

See the Pen 7348 by ryohei (@intotheprogram) on CodePen.

rel="noopener"の役割

target="_blank"でページを遷移すると、遷移先のページでは遷移元のページ情報(window.openerオブジェクト)を閲覧・操作することができます。rel="noopener"は遷移先のページでwindow.openerオブジェクトの情報が閲覧されないように設定するセキュリティ対策です。

最新のブラウザはwindow.openerが設定されないようになっている

最新のブラウザでは、aタグtarget_blankであればwindow.openerを設定されないように変更されています。その点も含めて対策をご検討いただければと思います。

参考URL:https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/noopener

最後に

小さなことからコツコツと、とはよく言いますが、セキュリティに関しても同様です。あまり工数がかからないようであれば対策しておくに越したことはありません。本記事の内容はソース側で対応できる項目なので、検討されても良いかもしれませんね。

以上、JavaScriptでaタグがtarget="_blank"であればrel="noopener"を自動で付与する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。