JSで、ページ内の「target="_brank"」に「rel="noopener"」を追加する方法

✏️️ 2019/09/08 👍️2019/09/08 🔗

noopener とは?

rel="noopener"を付与すると、新しいタブで開いたページから元のページの操作ができなくなります。

rel="noopener"を付与しないと

  1. サイトAから別タブでのサイトBを開く
  2. サイトBでサイトAを操作して、フィッシングサイトA'に遷移させる

ということなどできるようになります。

実装

# application.js
// 外部リンクにrel="noopener"を付与
document.addEventListener('turbolinks:load', function () {
  const aElementList = document.querySelectorAll('a');
  aElementList.forEach(element => {
    if (element.hasAttribute('target') === false){
      return;
    }

    if (element.getAttribute('target') !== '_blank'){
      return;
    }

    element.setAttribute('rel', 'noopener');
  });
});

参考

以上で、JSで、ページ内の「target="_brank"」に「rel="noopener"」を追加する方法は完了です。

akito
日本のスタートアップで主にRuby on Railsを使ってプロダクト開発をしています。