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

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでaタグが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"を自動で付与する方法のご紹介でした！