HTML 새 탭에서 열기 방법과 탭내빙 공격

HTML 링크를 클릭하면 대부분 새 탭에서 링크가 열립니다. 이를 통해 사용자는 기존의 페이지를 유지하며, 새로운 탭에서 브라우징을 계속할 수 있는 장점이 있습니다.

 

이번 포스팅에서는 HTML 요소에 링크를 지정하는 방법, 새 탭에서 여는 방법, 이와 관련된 탭내빙 공격에 대해 알아보도록 하겠습니다.

요소에 링크 적용하기

텍스트 또는 이미지 요소에 웹페이지 링크를 적용하기 위해서는 <a> 앵커 요소와 href 속성을 사용합니다.

<p>Please check <a href="https://walkingplow.tistory.com">my website<a>.</p>

링크를 클릭하면 브라우저는 현재 탭에서 해당 URL로 이동하게 됩니다.

링크를 새 탭에서 열기

위의 코드에 target="_blank" 속성을 추가하면 링크를 새 탭에서 열도록 할 수 있습니다.

<p>Please check <a href="https://walkingplow.tistory.com" target="_blank">my website<a>.</p>

링크를 클릭하면 브라우저는 새 탭에서 해당 URL을 새롭게 열게 됩니다.

target=”_blank”와 관련된 보안 위험

링크를 새 탭으로 여는 target="_blank"는 유용한 방법이지만, 탭내빙(Tabnabbing)이라는 보안 위험이 존재합니다. 탭내빙이란 HTML 문서 내의 링크를 클릭할 때, 기존 문서의 위치를 피싱 사이트로 변경하는 것입니다.

 

이를 방지하기 위해서는 다음과 같이 추가적인 속성 rel="noreferrer noopener"을 지정해주어야 합니다.

<p>Please check <a href="https://walkingplow.tistory.com" target="_blank" rel="noreferrer noopener">my website<a>.</p>

탭내빙이란?

탭내빙은 tagert="_blank" 속성을 통해 브라우저 이벤트가 발생할 때, window.object API를 통해 페이지 일부 권한을 획득하는 공격 방식입니다.

 

공격자는 탭내빙을 통해 새 탭으로 이동하게 한 기존 웹페이지를 다른 페이지로 리다이렉션 시킬 수 있습니다. 대부분의 사용자는 새롭게 열린 탭에 관심을 갖고 있기 때문에, 기존의 웹페이지가 변경된 것을 눈치채지 못할 수도 있습니다.

 

가짜 웹사이트로 사용자가 다시 돌아와 로그인을 하거나 민감한 정보를 입력하게 될 경우, 공격자는 해당 정보를 가로챌 수도 있습니다.

마치며

HTML 페이지에서 링크를 새 탭에서 열려면 traget="_blank" 속성을 사용할 수 있습니다. 그러나 이를 단독으로 사용하면 탭내빙 공격에 노출될 수 있으며, 따라서 rel="noreferrer noopener" 속성을 추가로 지정해주는 것이 좋습니다.