[React] target="_blank" ESLint 경고의 의미와 해결 방법 (react/jsx-no-target-blank)

| 인트로

 

안녕하세요, 팡일입니다.

 

오늘은 프로젝트에서 외부 링크를 새 탭으로 열기 위해 사용한 target="_blank" 속성으로 인해 마주했던 경고에 대한 포스팅을 기록해보려고 합니다.

Using target="_blank" without rel="noreferrer" (which implies rel="noopener")
is a security risk in older browsers
react/jsx-no-target-blank

 

바로 위와 같은 경고였는데요?

 

이를 보면서 “새 탭으로 여는 것이 왜 문제가 되는 걸까?”라는 의문이 들고는 했습니다. 이에 대해 더 알아본 결과 해당 경고는 실제 보안 취약점을 예방하기 위해 반드시 필요한 안내였습니다.

 

 

 

 

| 문제가 되는 코드

앞에서 마주한 경고는 다음과 같은 코드에서 ESLint 경고가 발생합니다.

<a
  href="https://www.facebook.com/..."
  target="_blank"
>
  Facebook
</a>

 

겉보기에는 전혀 문제가 없어 보이지만, 이 코드에는 보안적으로 주의해야 할 부분이 포함되어 있습니다.

 

 

 

 

| 핵심 원인 :  window.opener 와 탭 납치(Tabnabbing)

target="_blank"를 사용하여 새 탭을 열 경우, 기본적으로 새로 열린 페이지는 기존 페이지(window.opener)에 접근할 수 있습니다.

 

즉, 새 탭이 열리고, 그 새 탭은 "누가 나를 열었는지"를 알고 있습니다. 이때 브라우저는 새 탭에세 부모 창에 대한 참조를 하나 넘겨주는데, 그게 바로 window.opener입니다.

 

 

즉, 새 탭에서 다음과 같은 코드 실행이 가능해집니다.

window.opener.location = "https://phishing-site.com";

 

이 코드의 의미는 아주 단순합니다.

👉 “나를 열어준 원래 탭의 주소를 다른 URL로 바꿔라”

 

즉, 새 탭이 원래 탭을 마음대로 이동시킬 수 있다는 뜻입니다.

 

이와 같은 공격 방식을 Tabnabbing(탭 납치 공격)이라고 합니다. ESLint는 이러한 가능성을 사전에 차단하기 위해 react/jsx-no-target-blank 규칙을 통해 경고를 출력합니다.

 

 

 

 

| 해결 방법:  rel="noopener noreferrer"  추가

이 문제를 해결하는 방법은 매우 간단합니다.

 

target="_blank"를 사용할 때 rel 속성을 함께 명시해주시면 됩니다.

<a
  href="https://www.facebook.com/..."
  target="_blank"
  rel="noopener noreferrer"
>
  Facebook
</a>

 

각 속성의 의미는 다음과 같습니다.

• noopener
  • 새로 열린 페이지에서 window.opener 접근을 차단합니다.
  • 보안 측면에서 가장 핵심적인 역할을 합니다.
• noreferrer
  • 링크를 클릭한 이전 페이지(referrer) 정보를 전달하지 않습니다.
  • 일부 구형 브라우저에서는 noopener의 역할까지 함께 수행합니다.

 

따라서 ESLint 경고 메시지에 noreferrer (which implies rel="noopener")라는 설명이 함께 표시됩니다.

 

 

 

 

| ESLint 경고를 무시해도 괜찮을까요?

 

사실 이 경고를 무시할까 싶었지만, 결과적으로는 권장되지 않는다고 생각했습니다.

 

최신 브라우저에서는 기본적인 보호가 적용되어 있는 경우도 있지만, ESLint는 구형 브라우저와 최악의 상황까지 고려하여 경고를 출력합니다. 실무 환경, 협업 프로젝트, 포트폴리오 코드에서는 보안 이슈를 명시적으로 처리하는 것이 표준에 가까울 것 같았습니다.

 

따라서 규칙을 비활성화하기보다는 코드를 안전하게 수정하는 방향이 바람직해 보입니다.

 

 

 

 

| 반복되는 외부 링크를 위한 실무 팁

 

이를 통해 다음과 같은 방법을 고안해보게 되었습니다.

 

외부 링크가 자주 등장하는 경우라면, 매번 동일한 속성을 작성하기보다 컴포넌트로 추상화하는 방법도 고려해볼 수 있습니다.

const ExternalLink = ({ href, children }) => (
  <a
    href={href}
    target="_blank"
    rel="noopener noreferrer"
  >
    {children}
  </a>
);

 

이와 같은 방식은:

• 보안 속성 누락을 방지할 수 있고
• 코드의 가독성을 높이며
• ESLint 경고를 구조적으로 예방할 수 있습니다.

 

 

 

 

| 정리하며

target="_blank"는 편리하지만 보안상 주의가 필요합니다. 새 탭에서 기존 페이지에 접근할 수 있는 window.opener가 문제의 핵심입니다. 해결 방법은 간단합니다. rel="noopener noreferrer"를 함께 사용하시면 됩니다. react/jsx-no-target-blank 규칙은 불필요한 제약이 아니라, 실무 기준에 가까운 보안 가이드입니다.