a태그의 target="_blank"와 rel="noopener noreferrer"

 

코드 작성하다가 발견한 rel="noopener noreferrer"에 대해서 정리해봅니다.

target="_blank"을 사용하는 경우 보안상 취약점이 발견되서 피싱 공격을 피하기 위해 사용한다고 하는데,

아래에 쭉 정리해 두었습니다 : )

 

1. target="_blank"

a태그 , react나 vue에서 Link나 router-link로 사용하는 경우,

이동할 주소나 화면을 새창으로 열어주는 기능을 한다.

참고로, 웹 접근성을 위해
target="_blank"을 사용하는 경우 title="새창으로 열기" 등으로
새창으로 열린다는 부분을 추가해 주는것이 좋다고 한다.

 

2. Tabnabbing 피싱 공격

위의 코드를 사용해 A라는 메인 페이지에서 B라는 새로운 페이지를 열었을때,

서브 페이지인 B에서 메인 페이지인 A를  window.opener라는 속성으로 컨트롤을 할 수 있는데,

이렇게되어 메인페이지인 A를 특정 URL로 이동시키는 피싱공격이다.

이를 방지하기위해 아래 3번의 rel="noopener noreferrer"를 사용한다

 

3. rel="noopener noreferrer"

 1.noopener

noopener를 설정하면 기존 메인페이지를 특정 URL로 이동시키는 window.opener속성을 사용할 수 없게 한다.

 

 

2.noreferrer

noreferrer을 설정하면 noopener과 비슷하게
새로 생긴 페이지에서 특정 URL로 이동시키는 window.opener속성을 사용할 수 없게 한다.

 

// 1. a tag 사용
<a href="#" target="_blank" rel="noopener noreferrer" title="새창으로 열기"/>

// 2. react의 Link
//  react에선 version 5.0.1 이후로 Link에 target="_blank"사용이 가능하다고 함
<Link to="route" target="_blank" rel="noopener noreferrer" />

// 3. vue의 router-link
//  router-link에서 target="_bank"사용 불가능 하다고 해서 tag를 a로 변경했다. (그냥 a태그 쓰는것이..)
<router-link tag="a" to="route" target="_blank" rel="noopener noreferrer" />

 

 

 

---

✔️ 참고

https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html