target="_blank"와 rel="noopener noreferrer의 보안 중요성과 사용법

웹 개발을 하다 보면 링크를 클릭했을 때 새 탭에서 열리도록 설정하는 경우가 자주 있습니다.

이를 위해 보통 target="_blank" 속성을 사용합니다. 하지만 이 속성만 사용했을 때 보안 문제가 발생할 수 있다는 사실을 알고 계셨나요? 이번 글에서는 target="_blank"와 함께 rel="noopener noreferrer"를 사용하는 이유와 그 방법에 대해 알아보겠습니다.

---

1. target="_blank"의 기본 기능

target="_blank"는 HTML에서 링크(<a>)를 클릭할 때 새 탭에서 열리도록 설정하는 속성입니다. 예를 들어, 아래와 같이 작성하면 링크가 새 탭에서 열립니다.

<a href="https://googlee.com" target="_blank">Visit</a>

사용자는 이 링크를 클릭하면 기존 페이지는 그대로 유지된 채로 새 탭에서 링크된 페이지를 열 수 있습니다. 이 기능은 사용자 경험을 개선하는 데 유용하지만, 단순히 이 속성만 사용할 경우 보안상의 취약점이 발생할 수 있습니다.

 

2. 보안 취약점: target="_blank"의 문제점

target="_blank"만 사용할 경우 발생할 수 있는 주요 보안 문제는 tabnabbing입니다.
tabnabbing이란, 링크된 페이지가 원래 페이지의 컨트롤을 가져올 수 있는 문제를 말합니다. 새로 열린 페이지는 window.opener 객체를 통해 원래 탭의 정보를 가져와 URL을 변경하거나 악성 스크립트를 실행할 수 있습니다.

이러한 취약점을 악용하면 사용자가 의도하지 않은 피싱 페이지로 리다이렉트되거나, 원래 페이지의 민감한 정보를 훔쳐갈 수 있게 됩니다. 이 때문에 target="_blank"를 사용할 때 보안 대책이 필요합니다.

 

3. 해결책: rel="noopener noreferrer"

이 보안 문제를 해결하기 위해 HTML5에서 제공하는 rel="noopener noreferrer" 속성을 함께 사용해야 합니다. 이 속성은 window.opener 객체를 제거하여 새 탭에서 열린 페이지가 원래 페이지를 제어하지 못하게 만듭니다.

• noopener: 새로 열린 페이지가 원래 페이지의 컨트롤을 얻지 못하도록 합니다.
• noreferrer: 링크를 클릭할 때 참조 정보(Referrer)를 넘기지 않도록 합니다. 이는 사용자의 개인정보 보호 측면에서 유용합니다.

예시로, 안전하게 링크를 열고 싶다면 아래와 같이 작성해야 합니다.

<a href="https://googlee.com" target="_blank" rel="noopener noreferrer">Visit</a>

이 코드를 통해 새 탭에서 링크를 열면서도 보안 문제를 방지할 수 있습니다.

 

4. noopener와 noreferrer의 차이점

• noopener: 새 탭이 원래 페이지에 접근하지 못하게 막기
  • 비유: 여러분이 카페에서 일하고 있다고 상상해보세요. 누군가가 여러분을 위해 문을 열어주고 나가면서 그 문을 닫지 않고 떠났습니다. 그러면 그 사람이 다시 돌아와서 언제든지 그 문을 통해 안으로 들어올 수 있죠.
  • noopener의 역할: noopener는 그 문을 완전히 닫아버리는 역할을 합니다. 새로 열린 페이지(새 탭)는 원래 탭(페이지)에 다시 들어와서 무언가를 수정하거나 바꾸지 못하게 막습니다.
• noreferrer: 새 탭에 원래 페이지 정보(참조 정보)를 넘기지 않기
  • 비유: 여러분이 카페에서 일을 마치고 다른 카페로 이동할 때, 원래 카페 이름을 말하지 않고 조용히 떠나는 상황을 생각해보세요. 새 카페에서 여러분이 어디에서 왔는지 모르게끔 하는 겁니다.
  • noreferrer의 역할: noreferrer는 새로운 페이지가 원래 페이지에 대한 정보를 알지 못하게 합니다. 새로 열린 탭에 여러분이 어떤 페이지에서 왔는지 알리지 않도록 막는 역할을 하죠.

대부분의 상황에서는 noopener만으로도 충분하지만, 사용자가 클릭한 페이지의 참조 정보를 넘기고 싶지 않을 때 noreferrer도 함께 사용합니다.

 

5. 언제 사용해야 할까?

 

1) noopener만 사용: 보안상의 이유로 새 탭이 원래 탭에 접근하는 것을 막고 싶을 때 주로 사용합니다.

2) noopener + noreferrer 함께 사용: 보안뿐만 아니라 원래 페이지 정보를 넘기고 싶지 않을 때, 즉 추적을 방지하고 싶을 때 사용합니다.

 

 

6. 실수 없이 쓰는 TIP

1. 기본적으로 target="_blank"를 사용하면 rel="noopener noreferrer"도 함께 사용하세요.
2. 외부 링크를 새 탭에서 열 때는 항상 보안을 우선으로 고려하세요.
3. 만약 SEO(검색 엔진 최적화)나 광고 링크 추적이 중요하다면 noopener만을 사용하고 noreferrer는 빼는 것도 고려할 수 있습니다.