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

こんにちは、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"を自動で付与する方法のご紹介でした!

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

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

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍