웹 페이지 간의 이동을 위해 사용되는 <a> 태그의 보안을 강화시키는 방법에 대해 알아보자.
<a> 태그?
는 주로 아래와 같은 상황에서 사용한다.
- 같은 URL에서 페이지 이동을 하거나 어떤 data가 있는 위치로 이동하는 경우
- 다른 URL로 페이지 이동을 하거나 현재 페이지에서 제공하지 않는 data를 링크로 제공하는 경우
이를 위해 <a> 요소 내부에는 기본적으로 href 라는 속성이 존재한다. 해당 속성에 이동하고자 하는 목적지를 적어서 그 위치 혹은 경로로 이동하게 된다.
이때, 2번 상황에서는 몇 가지 속성을 추가하여 사용할 수 있다.
target=""
이 속성에는 아래와 같은 값을 통해 연결된 웹 페이지를 표시하는 방법에 대해 설정할 수 있다.
⭐️ _blank : 연결된 페이지를 새로운 윈도우나 탭에서 열기
🔗 _self (기본값) : 연결된 페이지를 링크가 위치한 현재 프레임에서 열기
🔗 _parent : 연결된 페이지를 현재 프레임의 부모 프레임에서 열기
🔗 _top : 연결된 페이지를 현재 윈도우 전체에서 열기
🔗 프레임 이름 : 연결된 페이지를 명시된 프레임에서 열기
이 중에서 가장 많이 사용하는 값은 _blank이다. 이는 다른 URL로 페이지 이동을 하는 경우, 새로운 탭을 열어 그 탭에서 연결된 페이지를 표시한다.
이 target="_blank" 에는 2가지 문제점이 존재한다.
1. 보안상 취약점
웹 사이트에서 연결 중인 페이지는 window.opener 객체를 통해 연결 페이지에 부분적으로 접근할 수 있다. 이는 연결 페이지에서 이전 페이지를 제어할 권한이 있음을 뜻한다.
만약 연결된 페이지에서 window.opener 를 통해 부모 윈도우(현재 페이지)에 접근해서 window.opener.location = 새로운 URL 로 부모 윈도우의 URL을 바꿔친다면 어떨까?
주식이나 코인과 같은 자산 거래소나, 로그인이 반드시 필요한 웹 페이지에서 최악의 경우 악의적인 URL로 접근시킬 수 있다. 이렇게 부모 윈도우의 정보를 사용하거나 조작하여 개인정보를 유출시키는 가짜 페이지로 부적절한 리다이렉션을 하는 등의 보안 상 심각한 문제가 발생할 수 있다.
2. 성능 저하
연결된 페이지는 링크를 건 페이지와 같은 프로세스를 통해서 실행된다. 만약 연결된 페이지에서 높은 부하를 유발하는 기능이 실행되고 있으면 링크를 건 페이지에도 영향을 미쳐 의도하지 않게 성능이 저하되는 문제가 발생할 수 있다.
이러한 문제점을 보완하기 위해 존재하는 기능이 있다.
🌟 rel="noreferrer noopener"
결론부터 말하자면 <a> 태그에 rel="noreferrer noopener" 를 추가하면 된다. 자세한 설명은 아래에서 확인하자.
<a href="https://velog.io/@reina__/posts" target="_blank" rel="noreferrer noopener">
믿고 열어봐!
</a>rel
해당 속성은 relation의 줄임말로, 링크 타입을 통해 연결된 URL과의 관계를 명시하는데 사용한다. 수많은 링크 타입이 있지만 그 중에서도 target="_blank" 의 취약한 보안을 보완해줄 수 있는 타입을 살펴보자.
noreferrer
: referrer (이전 페이지) 정보 삭제
다른 페이지로 이동하는 경우 HTTP 요청 헤더에 referrer 를 포함시키는데, referrer 에는 현재 요청된 페이지가 어디서 링크되었는지에 대한 정보를 나타낸다.
HTTP 요청 헤더에 referrer 가 노출될 때 referral leakage 가 발생할 수 있고, 이로 인해 개인 정보나 키, 값 등이 유출되어 보안에 위험을 초래할 수 있다.
이런 경우 rel="noreferrer" 을 사용하면 다른 페이지로 이동할 때 브라우저가 Referer: HTTP 헤더를 통해 이 페이지의 주소나 값을 referrer 로 보내는 것을 방지해 보안을 강화할 수 있다.
noopener
: opener (새 페이지를 연 사람의 정보) 삭제
norefferer 와 비슷하게 보안 위험을 방지하는 속성이다.
noopener 가 적용되지 않은 링크의 페이지로 이동하면 window.opener 에 이전 페이지의 경로를 담아주어, 이동한 페이지에서 이전 페이지를 참조할 수 있게 된다.
이때 window tab nabbing 이라는 악의적인 공격이 발생할 수 있는데, 이는 연결된 페이지로 이동할 때 새로 열릴 페이지의 URL을 조작하여 다른 웹사이트로 이동하게 만드는 공격이다.
스미싱 페이지에서 로그인을 해 계정 정보가 해킹되는 등의 사례가 이에 해당된다.
이런 경우 rel="noopener" 를 적용하면 브라우저 컨텍스트의 권한없이 연결된 페이지를 열어준다. 이는, 새 창에서 window.opener 속성이 null 이 반환되어 이전 페이지에 대한 참조를 불가능하게 하므로 보안을 강화할 수 있다.
아래는 noopener 에 대한 참고 사항이다.
noopener속성을 사용한다면,target속성의 값으로_top,_self,_parent속성을 제외한 모든 속성은_blank로 적용된다.- 최근 브라우저(Firefox 79+ 등)는
target="_blank"를 지정하면 임의로rel="noopener"설정과 동일한 보호 수준을 적용해준다.
이렇게 취약한 보안을 보완해줄 수 있는 속성뿐만 아니라 SEO에 최적화할 수 있는 속성도 존재하는데 마지막으로 이를 알아보며 글을 마무리하겠다.
nofollow
nofollow 는 검색 엔진 최적화(SEO)와 관련된 속성으로 링크된 문서가 이 문서의 작성자에 의해 보증되지 않았음을 나타낸다.
Google에서 내 사이트와 링크된 페이지를 연결하지 않기를 바라거나, 크롤러가 링크된 페이지를 크롤링*하지 않기를 바라는 경우 rel="nofollow" 를 사용한다.
보통 스팸 댓글과 같은 경우에 이를 설정하여 해당 페이지로 이동하더라도 스팸 댓글의 링크에 검색 엔진 크롤러가 동작하지 못하여 검색 엔진에 영향을 주지 않게 할 수 있다.
*크롤링: 웹 크롤링이란 웹상의 정보들을 탐색하고 수집하는 작업
sponsored
연결된 URL이 광고 링크거나 유료 게재 링크(유료 링크)일 경우rel="sponsored" 으로 표시한다.
구글에서 2020년에 도입한 것으로, 이를 사용하여 검색 결과 랭킹에 해당 링크가 미치는 영향을 조절하고 사용자에게 보다 정확한 검색 결과를 제공할 수 있다.
ugc
연결된 URL이 사용자 제작 콘텐츠(게시물, 댓글 등)일 경우 rel="ugc" 로 표시한다.
이 또한 구글에서 2020년에 도입한 것으로 이를 통해 Google 검색 엔진이 링크를 보다 정확하게 해석하여 검색 엔진 최적화에 도움이 된다고 한다.
