【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オブジェクトの情報が閲覧されないように設定するセキュリティ対策です。