https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-add-relnoopener-when-_blank-is-attached-to-a-tag-in-the-page-with-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-add-relnoopener-when-_blank-is-attached-to-a-tag-in-the-page-with-javascript/

JavaScriptでページ内のaタグで「_blank」が付いている場合に「rel=”noopener”」を追加する方法

特定部分を直接書き換えるのに便利なouterHTML

target="_blank"」が設定されているaタグでウィンドウを開いた場合、開いた先のウィンドウからはwindow.openerを用いて元のウィンドウを操作することが可能です。

ここ最近はこれにはセキュリティ脆弱性が伴うという考えが広まり、それを防ぐために「rel="noopener"」を一緒に付けることが有効と言われています。

ここでは、 「target="_blank"」が設定されているaタグでに自動手「rel="noopener"」を付与するサンプルコードを紹介します。

サンプルコード

サンプルコードではtarget属性をつけているか付けていないかで2つのボタンを用意しています。実際に付与がされているかは開発者ツールで確認ください。

Output
Pug
#targetArea.text-center
		.d-flex
			a.d-block.btn-info.rounded.p-2.mr-2(href="https://idea-hack.com/code") target属性なし
			a.d-block.btn-info.rounded.p-2(href="https://idea-hack.com/code" target="_blank") _blank
JavaScript
// a要素を一括取得
const aElementLists = document.querySelectorAll('a');
// 各a要素について処理する
aElementLists.forEach((element) => {
  // aタグにtarget属性が存在しなかったらreturn
  if (element.hasAttribute('target') === false) {
    return;
  }
  // target属性_blankではなかったらreturn
  if (element.getAttribute('target') !== '_blank') {
    return;
  }
  // rel属性にnoopenerを付与する
  element.setAttribute('rel', 'noopener');
});
インストラクター
コメント

コメントを残す