a 태그에 rel="noopener noreferrer" 속성을 추가하는 이유

noopener & noreferrer 속성 추가하는 이유

href 속성을 통해 다른 페이지로 연결할 수 있는 하이퍼링크를 만든다.

그냥 사용할 경우 target이 _self (기본값)라서 url을 현재 브라우징에 표시한다.

하지만 target="_blank" 로 지정할 경우 새로운 브라우저(새 탭)에 표시한다.

// a태그 활용 (target X)
<a href="#">그냥 열기</a>

// a태그 활용2 (target은 _blank)
<a href="#" target="_blank">새 창으로 열기</a>

이렇게 새로운 브라우저에 표시하게 되었지만

rel 지정 없이 사용하게 되면 웹사이트가 window.opener API 악용 공격에 취약해진다.

새로 열린 페이지는 원본 페이지를 참조하고 있기 때문에 window.opener 에 의해 부분적으로 액세스 하여 피싱 페이지로 변경될 수 있다.

window.opener.location = '피싱사이트 url ';

window.opener를 이용한 피싱 공격을 말한다.

1. 사용자가 A 사이트에서 target이 _blank인 링크를 클릭

2. 새 탭으로 해당 링크가 열림

3. 이 때 해당 링크에서 window.opener.location을 B 사이트(피싱사이트)로 변경

4. 피싱사이트인 B사이트는 UI가 A사이트와 똑같은 낚시 사이트

5. 사용자는 B 사이트로 돌아오지만 A 사이트와 교묘하게 똑같기 때문에 본래의 탭으로 돌아왔다고 생각함

6. 사용자는 피싱사이트인 B 사이트에서 개인정보를 입력

7. 피싱사이트인 B 사이트는 다시 A 사이트로 리다이렉션하므로 사용자가 눈치를 못챔 ...

이러한 보안 취약점 피싱 공격을 방지하기 위해 noopener, noreferrer이 등장하였다.

target="_blank"가 적용되어 있는 링크를 클릭하면 원본 페이지에 대한 컨텍스트 권한을 제공하지 않고 새 탭에서 최상위 브라우징 컨텍스트를 새로 생성하여 링크를 열도록 한다. 따라서 window.opener의 값이 null이 된다.

다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를 브라우저가 HTTP 프로토콜의 referrer 이라는 헤더값 생략하여 정보 누출을 막는다. 즉, noreferrer을 설정한 링크를 클릭하면 해당 유입이 어디서 발생하였는지에 대한 정보가 제공하지 않는다.

<a href="#" target="_blank" rel="noopener noreferrer">새 창으로 열기</a>

참고로 최신의 크롬과 사파리의 경우 target="_blank"인 링크의 기본 동작이 noopener로 변경되었다고 한다.