a태그 _blank 보안취약점 보완 속성 / noopener, noreferrer, nofollow

링크를 연결할 때 사용하는 태그인 a태그에서 대부분 target="_blank"를 사용한다.

기존 페이지를 남겨두고 새창에서 띄우기 때문에 어떻게 보면 사용자 편의성에서도 좋은 속성이다.

 

다만 여기서 문제점이 생긴다.

보안에 있어서 취약점이 생긴다는 것!

 

그 보안취약점을 보완하기 위해서

rel="noopener nereferrer nofollow" 이 세가지 속성을 사용할 수 있다.

 

세가지 속성들의 사용법은?

- noopener

하이퍼링크를 클릭하게 되면 새로 열린 페이지가 보조 브라우징 컨텍스트이기 때문에

자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있다고 한다.

응..?

 

쉽게 설명하면

새 페이지에서 많은 js를 실행하게 되는 경우 원본 페이지의 성능이 저하 된다.

 

그렇게 되면 새로운 사이트를 새창에서 열게 되었을 때,

새탭에서 열리는 창이 피싱사이트로 변경이 된다.

그리고 다시 본래의 탭으로 돌아가게 되면 로그인이 해제되어있다고 생각하고 다시 id, pw를 입력하게 된다.

그렇게 되는 경우 피싱 사이트는 id, pw를 탈취하였고 리다이렉션이 되므로 사용자는 눈치챌 수 없다.

 

이러한 경우를 막기 위해 noopener이라는 속성이 등장하였다. noopener를 적용하게 되면

원본 페이지에 대한 컨텍스트 엑세스를 제공하지 않고

새탭에서 최상의 브라우징 컨텍스트를 새로 생성하여 링크를 열도록 브라우저에게 지시한다.

- noreferrer

이 속성은 nopener의 기능과 동일하게 새로 열린 사이트가 window.opener객체에 접근하는 것을 방지하는 역할을 한다.

그 외에 추가 기능이 포함되어 있다고 한다.

브라우저가 해당 페이지를 불러오면서 http 요청을 보낼 때 referer헤더를 생량하는 것

이렇게 되면 링크를 클릭할 때 해당 유입이 어디에서 발생하였는지 새 페이지에 제공되지 않는다.

 

---

그럼 이 두가지를 언제 사용해야할까?

일반적으로는 둘 다 사용하는 것이 좋다고 한다.

브라우저 호환성 때문!!

일부 구형 브라우저의 경우에는 noreferrer만 지원하는 경우가 있다고 한다. 그렇기 때문에 2개 다 사용하자!!

---

- nofollow

이 속성은 검색 엔진에게 링크된 웹사이트를 보증하거나 신뢰할 수 없으니 현재 웹사이트와 연결하지 않기를 바라는 경우에 사용!

스팸 댓글 때문에 이 속성이 생겼다고 한다.

 

 

 

 

요즘 it라는 웹사이트에서 더 자세한 설명을 볼 수 있다. 참고하였으니 여기서 한번 정독을 해보는게 좋을거 같다.

하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow | 요즘IT