[JavaScript] 자바스크립트에서 <a> 태그 _blank의 부모창 조작 제한하기

149_자바스크립트에서 <a> 태그 _blank의 부모창 조작 제한하기

[적용]

• 안전하게 _blank 속성을 사용하고 싶을 때

---

[내용]

target="_blank" 속성을 가진 a 태그로 윈도우 창을 열었을 때,

해당 창에서 window.opener를 사용해 부모창의 제어가 가능하다.

하지만 어느 정도의 위섬성을 내포하므로 rel="noopener"를 사용해 부모창의 제어를 제한할 수 있다.

 

_blank 속성의 a 태그를 자동으로 noopener 설정하는 예시를 확인해 보자.

 

HTML                                                                                                                                                              index.html

<ul>
  <li><a href="dummypage1.html" target="_blank">링크1</a></li>
  <li><a href="dummypage2.html">링크2</a></li>
  <li><a href="dummypage3.html" target="_self">링크3</a></li>
  <li><a href="dummypage4.html" target="_blank">링크4</a></li>
</ul>

<p><a href=:dummypage5.html">링크5</a></p>

JavaScript                                                                                                                                                          main.js

// a 요소 모두 가져오기
const aElementList = document.querySelectorAll('a');

// a 요소별 처리
aElementList.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');
});

 

실행결과

<ul>
  <li>
    <a href="dummypage1.html" target="_blank" rel="noopener">링크1</a>
  </li>
  <li>
    <a href="dummypage2.html">링크2</a>
  </li>
  <li>
    <a href="dummypage3.html" target="_self">링크3</a>
  </li>
  <li>
    <a href="dummypage4.html" target="_blank" rel="noopener">링크4</a>
  </li>
</ul>
<p>
  <a href=:dummypage5.html">링크5</a>
</p>

개발자 도구에서 HTML 코드를 확인해 보면 _blank가 설정된 a 태그만 noopener가 설정되어 있다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김