탭(tab)은 정말 유용한 기능이죠. 멀티태스킹을 즐기는 우리 모두가 여러 온라인 작업을 동시에 처리할 수 있도록 도와줍니다.
요즘은 탭이 워낙 보편화되어서 링크를 클릭하면 자동으로 새 탭에서 열리는 경우가 많습니다.
혹시 내가 만든 링크도 그렇게 동작하게 하고 싶다고 생각해 본 적이 있다면, 잘 찾아오셨습니다. 지금부터 그 방법을 하나씩 살펴보겠습니다.
앵커(Anchor) 요소란?
웹 페이지에 링크를 만들려면 텍스트나 이미지 같은 콘텐츠를 앵커(<a>) 요소로 감싸고, href 속성에 연결하고자 하는 URL을 지정하면 됩니다.
<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>이 코드를 실행하면 다음과 같은 결과가 나타납니다.
Check out freeCodeCamp.
위 링크를 클릭하면 브라우저는 현재 창이나 탭에서 해당 링크를 엽니다. 이것이 모든 브라우저의 기본 동작입니다.
링크를 새 탭에서 열리게 하려면 앵커 요소의 또 다른 속성을 활용해야 합니다.
target 속성
target 속성은 브라우저에게 링크를 어떤 방식으로 열지 지시하는 역할을 합니다.
링크를 새 탭에서 열고 싶다면 target 속성 값을 _blank로 설정하기만 하면 됩니다.
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>이제 사용자가 링크를 클릭하면 새 탭에서 열리고, 브라우저 설정에 따라서는 새 창으로 열릴 수도 있습니다.
target="_blank"의 보안 문제점
target 속성을 사용할 때는 반드시 rel="noopener noreferrer"를 앵커 요소에 함께 추가하는 것을 강력히 권장합니다.
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>rel 속성은 현재 페이지와 연결된 URL 사이의 관계를 정의합니다. 이 값을 noopener noreferrer로 설정하면 '탭내빙(tabnabbing)'이라 불리는 피싱 공격을 예방할 수 있습니다.
탭내빙(tabnabbing)이란?
탭내빙은 '역방향 탭내빙(reverse tabnabbing)'이라고도 불리는 공격 기법으로, target="_blank"에 대한 브라우저의 기본 동작을 악용해 window.opener 객체를 통해 원래 페이지에 부분적으로 접근하는 익스플로잇(exploit)입니다.
공격자는 이 기법을 통해 사용자가 방문 중인 페이지를 가짜 로그인 페이지로 리디렉션할 수 있습니다. 대부분의 사용자는 방금 열린 새 탭에 집중하고 있어 원래 탭의 변화를 알아차리기 어렵습니다.
그리고 사용자가 다시 원래 탭으로 돌아오면 진짜 페이지가 아닌 가짜 로그인 화면을 마주하게 되고, 무심코 로그인 정보를 입력해 버릴 수 있습니다.
탭내빙의 작동 원리와 공격자가 이 취약점으로 무엇을 할 수 있는지 궁금하다면 Alex Yumashev의 글과 OWASP의 문서를 참고해 보세요. 또한 안전하게 구현된 실제 예시를 확인하고 싶다면 관련 데모 페이지와 GitHub 저장소를 통해 이 공격 기법과 rel 속성에 대해 더 자세히 배울 수 있습니다.
핵심 정리
HTML로 링크를 새 탭에서 여는 방법은 아주 간단합니다. 세 가지 중요한 속성을 가진 앵커(<a>) 요소만 준비하면 됩니다.
- href: 연결하려는 페이지의 URL을 지정
- target:
_blank값 설정 — 브라우저 설정에 따라 새 탭 또는 새 창으로 열림 - rel:
noreferrer noopener값 설정 — 링크된 페이지에서 발생할 수 있는 악성 공격 차단
전체 예제 코드를 다시 한번 확인해 보겠습니다.
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>브라우저에서의 출력 결과는 다음과 같습니다.
Check out freeCodeCamp.
끝까지 읽어주셔서 감사합니다. 즐거운 코딩 되세요!